nicht angemeldet
Mittige Ausrichtung ... ich hab da ein Problem
oxo888oxo
0 
Matthias Apsel
Mittige Ausrichtung ... ich hab da ein Problem
oxo888oxo
Der MartinHallo
Ich habe da ein kleines Problem mit mittiger Ausrichtung mittels CSS.
Unten der Code dazu.
Die ersten beiden Zeilen mit "XXXXXXXXXXXXXX" sind ja zentriert, so wie ich es haben möchte.
Die untere dritte Zeilen mit "XXXXXXXXXXXXXX" ist nicht zentriert.
Ich habe dieser Zeile eine Breite von 300 Pixeln gegeben.
Dadurch rutscht sie nach links.
Aber ich verstehe nicht so recht warum.
Sollte nicht durch das "text-align: center;" für div.Kopf alles darin mittig ausgerichtet sein?
Gruß
Ingo
<!DOCTYPE html>
<head>
<style>
html {
height:101%; /* -- Vertikale Scroll-Leiste bei Gecko's erwingen -- */
}
body {
width: 510px;
margin: 0 auto;
}
div#Inhalt div.Kopf {
border: 1px solid #313131;
text-align: center;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trallalla</title>
</head>
<body>
<div id="Inhalt">
<div class="Kopf">
<p>XXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXX</p>
<p style="width: 300px;">XXXXXXXXXXXXXX</p>
</div>
</div>
</body>
</html>
-
Om nah hoo pez nyeetz, oxo888oxo!
Die untere dritte Zeilen mit "XXXXXXXXXXXXXX" ist nicht zentriert.
Ich habe dieser Zeile eine Breite von 300 Pixeln gegeben.
Dadurch rutscht sie nach links.
Aber ich verstehe nicht so recht warum.
Sollte nicht durch das "text-align: center;" für div.Kopf alles darin mittig ausgerichtet sein?Gib deinen Absätzen mal einen Hintergrund und schau dir an, was tatsächlich passiert.
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Mink und Minkowski-Diagramm.
-
Hallo Matthias
Gib deinen Absätzen mal einen Hintergrund und schau dir an, was tatsächlich passiert.
Jo habe ich gemacht.
Demnach sind die 3 Absätze selbst alle linksbündig.
Der Inhalt (Text) ist dann mittig innerhalb der Absätze.Kann ich denn auch die Absätze selbst mittig in dem DIV-Container ausrichten?
Gruß
Ingo-
Om nah hoo pez nyeetz, oxo888oxo!
Demnach sind die 3 Absätze selbst alle linksbündig.
Absätze sind sogenannte Block-Elemente. Sie nehmen immer die komplette zur Verfügung stehende Breite ein.
Der Inhalt (Text) ist dann mittig innerhalb der Absätze.
text-align wird vererbt.
Kann ich denn auch die Absätze selbst mittig in dem DIV-Container ausrichten?
Ja, margin hilft.
Matthias
-
Hallo Matthias
Absätze sind sogenannte Block-Elemente. Sie nehmen immer die komplette zur Verfügung stehende Breite ein.
Ah OK alles klar.
Hab's verstanden.text-align wird vererbt.
OK; prima. Auch gerafft :)
Ja, margin hilft.
Ahhh.
margin-left:auto; margin-right:auto
Das margin: 0 auto; ist ja quasi das gleiche, nur das eben oben und unten der Aussenabstand auf 0 gesetzt wird, oder?Gruß
Ingo
-
-
-
Hallo,
mit text-align wird der Text innerhalb des ihm zur Verfügung stehenden Platzes zentriert.
Die Vorgabe ist, das Absätze innerhalb ihres Elternelements den kompletten zur Verfügung stehenden Platz einnehmen. Wenn du die Breite des p-Elements verringerst wird der Text innerhalb dieser verminderten Breite zentriert.
Das kannst du sehen, wenn du dem p-Element einen Rahmen (oder wie schon geschrieben eine Hintergrundfarbe) spendierst:
http://foreninfo.bplaced.net/seiten_fremdseiten/2014_04_19_oxo888oxo_01_zentrieren.html
Gruss
MrMurphy
-
Hallo MrMurphy
Das kannst du sehen, wenn du dem p-Element einen Rahmen (oder wie schon geschrieben eine Hintergrundfarbe) spendierst:
Ah ja OK, Danke Dir.
Das leuchtet mir ein.Die Vorgabe ist, das Absätze innerhalb ihres Elternelements den kompletten zur Verfügung stehenden Platz einnehmen. Wenn du die Breite des p-Elements verringerst wird der Text innerhalb dieser verminderten Breite zentriert.
Was ich noch nicht verstehe ... warum werden denn die p-Elemente links angeordnet?
Greift das "text-align: center;" nur für Text?
Oder wie habe ich das zu verstehen?Gruß
Ingo-
Hallo,
Was ich noch nicht verstehe ... warum werden denn die p-Elemente links angeordnet?
Greift das "text-align: center;" nur für Text?ja, genau. Oder noch besser: Für inline-Inhalt, also z.B. auch Bilder oder Formularelemente.
Blockelemente ticken anders.Oder wie habe ich das zu verstehen?
Zum Zentrieren von Blockelementen innerhalb ihres Elternelements hilft margin.
Ciao,
Martin--
Wenn der Computer wirklich alles kann,
dann kann er mich mal kreuzweise.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo Martin
ja, genau. Oder noch besser: Für inline-Inhalt, also z.B. auch Bilder oder Formularelemente.
Blockelemente ticken anders.Jo, wieder was gelernt. Danke!
Zum Zentrieren von Blockelementen innerhalb ihres Elternelements hilft margin.
Alles klar. Habs nun.
Gruß
Ingo
-
-
Om nah hoo pez nyeetz, oxo888oxo!
Was ich noch nicht verstehe ... warum werden denn die p-Elemente links angeordnet?
Du könntest sie auch rechts anordnen, wenn du möchtest. Z.B. indem du in Mr. Murphys Beispiel folgendes CSS hinzufügst.
div#Inhalt div.Kopf { direction: rtl; /* Schreibrichtung von rechts nach links */ }und damit es mit den Satzzeichen vernünftig aussieht:
div#Inhalt div.Kopf * { /* für nachfolgende Elemente wieder umkehren */ direction: ltr; }ohne letzeres wird aus
Dies ist ein Text..Dies ist ein TextMatthias
-
-
-