Textausrichting mit CSS in einer Zeile?
Hallo,
ich möchte mehrer Dinge in eine Zeile schreiben, aber alle anderes ausrichten.
Habe es schon mit CSS versucht, aber bei mir springt dann alles in eine neue Zeile und das möchte ich nicht.
Zum Beispiel:
Platzhalter=linksbündig
Platzhalter=zentriert
Platzhalter=rechtsbündig
Und das soll in einer Zeile stehen.
Danke im voraus
3 Antworten
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;
}
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
flex haben sie inzwischen auch per Standard drin
"inzwischen"? display:flex wird seit 9 Jahren von allen Browsern unterstützt.
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
ach siehst du, flex haben sie inzwischen auch per Standard drin 🙂 danke, das ist noch besser