CSS Border um mittig ausgerichteten Text?

Dsimon24 · 19. Februar 2021

Hallo zusammen,

ich hänge gerade wieder ein wenig bei CSS fest.

Ich habe einen Text in der Mitte einer Website. Um diesen Text möchte ich einen Rahmen setzen.

HTML:

<html>
  <div style="text-align: center; border: solid 1px black;">
    <h1>
    Text 1
    </h1>
    <h2>
    Text 2
    </h2>
  </div>
</html>

Mein Problem dabei: Der Rahmen richtet sich an der gesamten Website-Breite aus. Ich möchte
den Rahmen aber nur unmittelbar um den Text in der Mitte haben. Wie kann ich sowas am
besten realisieren?

VG,

breedmaster · 19. Februar 2021

HTML:

<html>
  <div style="text-align: center; border: solid 1px black; display: inline-block">
    <h1 >
    Text 1
    </h1>
    <h2>
    Text 2
    </h2>
  </div>
</html>

Grundsätzlich empfehle ich noch https://css-tricks.com/snippets/css/complete-guide-grid/, falls formatierungs Probleme auf dich zukommen

Defender1st · 19. Februar 2021

Wie wär's so:

HTML:

<html>
<div style="text-align: center;">
  <div style="border: solid 1px black; display:inline-block;">
    <h1>
    Text 1
    </h1>
    <h2>
    Text 2
    </h2>
  </div>
</div>
</html>

LeadScientist · 19. Februar 2021

Du hast nur einen Div, der die ganze Webseite überspannt. Um diesen Div zieht es die Border drum und somit um die ganze Webseite. Arbeite am besten mit zwei Divs und nem Inlineblock.

netzgestaltung · 19. Februar 2021

HTML:

<html>
  <div style="max-width:290px; margin:2em auto; border:1px solid #000000;">
    <h1>Text 1</h1>
    <h2>Text 2</h2>
  </div>
</html>

gutes altes horizontales zentrieren.

alternative dazu mit Flex und vertikalem zentrieren:

HTML:

<html>
  <div style="display:flex; justify-content:center; align-items:center; height:100vh; width:100vw;">
    <div style="padding:4em; border:1px solid #000000;">
      <h1>Text 1</h1>
      <h2>Text 2</h2>
    </div>
  </div>
</html>

referenz: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
ps: inline-styles nur der vergleichbarkeit halber genutzt.
pps: richtig spannend wirds vermutlich erst wenn statt der H2 ein laaaaanger text da steht und das mobil auch noch laufen soll.

Suche

CSS Border um mittig ausgerichteten Text?

Dsimon24

Lieutenant

breedmaster

Cadet 3rd Year

Defender1st

Lt. Junior Grade

LeadScientist

Lieutenant

netzgestaltung

Captain

Ähnliche Themen