Textausrichting mit CSS in einer Zeile?

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, IT
08.11.2021, 00:07

Für solche Zwecke und Formatierungen ergibt es Sinn, wenn du dir einzelne Hilfs-Klassen dafür anlegst. Der großen Vorteil von Klassen ist vor allem der, das sie im Gegensatz zu IDs immer wieder verwendet werden können.

Wenn also an einer anderen Stelle erneut ein Text ausgerichtet werden soll, musst dem neuen Element einfach nur die entsprechende Klasse mitgegeben werden. Durch diese Herangehensweise sparst du am Ende einiges an CSS, ohne dass du dich ständig mit denselben Eigenschaften und Werten ständig wiederholst.

HTML:

<!-- example 1 -->
<article class="box d-flex">
  <p class="text-left">some text left</p>
  <p class="text-center">some text in the middle</p>
  <p class="text-right">some text right</p>
</article>

<!-- example 2 -->
<section class="wrap">
  <h2>Posts</h2>
  <div class="d-flex">
    <article class="post text-left">
      <h3>Post title</h3>
      <p>some text</p>
    </article>
    <article class="post text-center">
      <h3>Post title</h3>
      <p>some text</p>
    </article>
    <article class="post text-right">
      <h3>Post title</h3>
      <p>some text</p>
    </article>
  </div>
</section>

CSS:

*, *::before, *::after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

html {
  font-size: 100%;
  box-sizing: border-box;
}

.wrap {
  width: 100%;
  max-width: 65rem;
  margin: 0 auto;
}

.post, .box > p {
  width: calc(100% / 3);
}

/* helper classes */
.d-flex {
  display: flex; 
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}
Woher ich das weiß:Berufserfahrung – Full-Stack Developer
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
07.11.2021, 11:48
ich möchte mehrer Dinge in eine Zeile schreiben, aber alle anderes ausrichten.

Wenn ich deine Frage richtig verstanden habe, nimmst Du dafür Flexboxen:

<!doctype html>
<title>Flexboxen</title>
<style>
section {
    display:flex;
}
article {width:33%; border:1px solid silver}
article#links  {text-align:left}
article#mitte  {text-align:center}
article#rechts {text-align:right}
</style>
<section>
<article id="links">linksbündig</article>
<article id="mitte">zentriert</article>
<article id="rechts">rechtsbündig</article>
</section>

Alex
rikks  07.11.2021, 11:49

ach siehst du, flex haben sie inzwischen auch per Standard drin 🙂 danke, das ist noch besser

EinAlexander  07.11.2021, 11:52
@rikks
flex haben sie inzwischen auch per Standard drin

"inzwischen"? display:flex wird seit 9 Jahren von allen Browsern unterstützt.
rikks
07.11.2021, 11:43

da wirst du mit mehreren Span-Elementen arbeiten müssen, die als Inline-Block formatieren und alignment setzen oder mit margin-x und Auto arbeiten müssen
verreisterNutzer  07.11.2021, 11:44

Ich bin Anfänger. Wie mache ich das?

rikks  07.11.2021, 11:49
@verreisterNutzer

evtl noch float, merke ich gerade...

um jeden textblock ein Span drum, den in Klassen einteilen "left", "center", "right" und per CSS arbeiten

span { display: Inline-Block; width:33%; }

.left { float: left }

.right { float: right }