nicht angemeldet
vertical-align in einem Div
0 0 0 
Matthias Apsel
0
vertical-align in einem Div
Gunnar BittersmannHi,
ich doktor hier herum und such mir nen wolf aber es geht nicht
text-align: center; funktioniert. vertical-aign: middle; hat keine Wirkung
#mitteilung {
height: 50px;
width: 280px;
margin: auto;
text-align: center;
vertical-align: middle;
font-size: 140%;
font-weight: bolder;
background-color: #A04040;
border: 1px solid #0000FF;
color: #FFFFFF;
}
Was mach ich da falsch?
Fritz!
-
Hallo
Was mach ich da falsch?
Du überspringst die Grundlagen von HTML / CSS.
vertical-align ist für Tabellen gedacht bzw. die Vorgabe "display: table". Dazu gibt es viele Erklärungen im Internet, googeln hilft.
Aktuell ist für die von dir gesuchte Lösung das Flexbox-Modell am geeignetsten.
Gruss
MrMurphy
-
Hallo,
bei css4you habe ich folgende Erklärung gefunden, die inline-Elemente hatte ich nicht mehr auf dem Radar:
Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile, bezogen auf das Elternelement, das ein Inline-Element sein muß. Man kann damit also kleineren Text an größerem Text oder auch an Grafiken ausrichten - nicht aber die vertikale Positionierung in einem Blockelement (z.B. div-Element) direkt bestimmen. Außerdem kann Text damit vertikal in Tabellenzellen positioniert werden. Der Normalwert ist dabei »baseline« - die Grundlinie.
Gruss
MrMurphy
-
Om nah hoo pez nyeetz, MrMurphy!
bei css4you habe ich folgende Erklärung gefunden, die inline-Elemente hatte ich nicht mehr auf dem Radar:
Man kann auch in unserer Doku schauen: http://wiki.selfhtml.org/wiki/Vertical-align, zweites „Beachten Sie“
Matthias
-
Hi,
Om nah hoo pez nyeetz, MrMurphy!
bei css4you habe ich folgende Erklärung gefunden, die inline-Elemente hatte ich nicht mehr auf dem Radar:
Man kann auch in unserer Doku schauen: http://wiki.selfhtml.org/wiki/Vertical-align, zweites „Beachten Sie“
Wo steht da, dass das nur für Tabellenzellen geht?
Wenn man es denn weiß, kann man es zwar rückwärts aus dem Beispiel schließen, weil ja keine Anwendung für DIV gezeigt wird, aber irgendwie ist das im Wiki unbefriedigend dargestellt.
Ich habe das Gefühl, dass CSS genauso zusammengestrickt ist, wie HTML. Es ist keine saubere Strukturierung drin.
Aber nun mal ohne Polemik:
Welches ist denn die einfachste und sauberste (wartbere) Lösung, um den Text in einem Div vertikal zu zentrieren.
Sowas, wie padding-vertical: auto; wäre doch noch plausibel.
Greez Fritz!
-
Hallo
Es ist keine saubere Strukturierung drin.
Weil du von den falschen Voraussetzungen ausgehst. HTML / CSS sind dazu gedacht, Informationen zu übermitteln, und zwar an alle möglichen Endgeräte.
Das Layout hat damit nichts zu tun und spielt deshalb nur eine Nebenrolle.
Das man ohne Lernen der Grundlagen immer wieder Überraschungen erlebt stimmt natürlich.
Welches ist denn die einfachste und sauberste (wartbere) Lösung, um den Text in einem Div vertikal zu zentrieren.
Eine der wenigen CSS-Angaben speziell für das Layout ist das Flexbox-Modell, das dafür entsprechend am besten geeignet ist. Allerdings ist das auch nicht grade einfach zu verstehen oder zu erklären. Googeln hilft.
Gruss
MrMurphy
-
Hallo
Es ist keine saubere Strukturierung drin.
Weil du von den falschen Voraussetzungen ausgehst. HTML / CSS sind dazu gedacht, Informationen zu übermitteln, und zwar an alle möglichen Endgeräte.
Was hat das mit den Endgeräte zu tun, wenn ein vertical-align: middle; auch für DIVs funktionieren würde, oder es ein einfaches "padding-vertical: auto;" geben würde. Die Browser müssen es doch nur umsetzen, und nach der Idee von HTML und CSS plattformunabhängig so einheitlich, wie es eben geht.
Das Layout hat damit nichts zu tun und spielt deshalb nur eine Nebenrolle.
Vertikale Zentrierung ist Darstellung.
Das man ohne Lernen der Grundlagen immer wieder Überraschungen erlebt stimmt natürlich.
Dieser Satz gehört nicht hierher, wenn Du seriös sein willst!
Welches ist denn die einfachste und sauberste (wartbere) Lösung, um den Text in einem Div vertikal zu zentrieren.
Eine der wenigen CSS-Angaben speziell für das Layout ist das Flexbox-Modell, das dafür entsprechend am besten geeignet ist. Allerdings ist das auch nicht grade einfach zu verstehen oder zu erklären. Googeln hilft.
Wenn hier nicht erklärt wird, wozu ist das Forum dann da?
Greez Fritz!
-
@@Fritz!:
Googeln hilft.
Suchen hilft. Es muss nicht Google (Spyware 2.0) sein.
Wenn hier nicht erklärt wird, wozu ist das Forum dann da?
Nicht dazu, das Internet zu kopieren.
Flexbox wurde dir genannt. Die Suche nach
flexbox vertikal zentrierensollte brauchbare Ergebnisse liefern.LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Gunnar Bittersmann:
Flexbox wurde dir genannt.
Smashing: Harnessing Flexbox For Today’s Web Apps
LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Flexbox wurde dir genannt. Smashing: Harnessing Flexbox For Today’s Web Apps
Ergänzung:
auch zum Beipiel http://maurice-web.de/css-vertikale-zentrierung-unbekannter-hoehe/, als fiddle zum Ausprobieren, CanIUse liefert Infos über notwendige Präfixe, wenn man möglichst viele Browser unterstützen möchte. Und wenn die IE < 10 den Text nicht zentriert anzeigen, ist es auch nicht schlimm. Die Bedienbarkeit einer Seite sollte nicht von einer solchen Kleinigkeit abhängig sein.
LLAP
Matthias
-
-
-
-
-
Om nah hoo pez nyeetz, Fritz!!
Wo steht da, dass das nur für Tabellenzellen geht?
Nirgends, denn es gilt nicht nur für Tabellenzellen.
Wenn man es denn weiß, kann man es zwar rückwärts aus dem Beispiel schließen, weil ja keine Anwendung für DIV gezeigt wird, aber irgendwie ist das im Wiki unbefriedigend dargestellt.
Wenn du das so schließt, schließt du falsch.
Welches ist denn die einfachste und sauberste (wartbere) Lösung, um den Text in einem Div vertikal zu zentrieren.
Flexbox.
Matthias
-
-
-
-
-
Hallo,
Was mach ich da falsch?
dir fehlt noch
display:table-cell;Gruß Kalk
-
Hi,
Was mach ich da falsch?
dir fehlt noch
display:table-cell; >Dann funktioniert aber das margin:auto nicht mehr; Das Div klatscht dann an den linken Rand im übergeordneten Element.
greez Fritz!
-
Hallo,
mit "display: table-cell;" verhält sich der Container natürlich wie eine Tabellenzelle - mit allen Auswirkungen.
Zudem wird im Hintergrund noch ein "display: table;" und ein "display: table-row;" hinzugefügt, damit die Tabelle vollständig ist. Das hat natürlich auch die entsprechenden Auswirkungen und im CSS müssen die Table-Eigenschaften benutzt und beachtet werden.
Gruss
MrMurphy
-
-
