nicht angemeldet
valign als CSS Eigenschaft ?
Hiho
Gibt es wie für align -> text-align auch für valign ein css attribut ?
Gruß
Hanno
-
Das vertical-align läuft bei mir irgendwie nicht. ICh hab da
folgendes Beispiel:
<html>
<head>
<title>Becker Software-Systeme</title>
<style type="text/css">
body{
margin: 0px;
background-color: white;
}
.center{
border: 1px solid black;
width: 100%;
height: 500px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="center">
<img src="bss.jpg" alt="">
</div>
</body>
</html>
Gruß
Hanno-
Hallo Hanno,
Das vertical-align läuft bei mir irgendwie nicht. ICh hab da
folgendes Beispiel:
.center{
[...]
vertical-align: middle;
}
[...]
<div class="center">Zum einen: vertical-align darf man nicht bei Blockelementen verwenden. Hat einfach keine Wirkung. <div> ist ein Blockelement.
Zum anderen:
Bei Inlineelementen wirkt sich vertical-align so aus:
+----------------------------------------------------------------------------------+
| * * * * +------------+ |
| * * * * | Inline-Box | |
| * * * * +------------+ |
| ******* **** * * ****** +-------------+ |
| * * * * * * * * | Inline-Box | |
| * * * * * * * * +-------------+ |
| * * ****** ** ** **** +------------+ |
| | Inline-Box | |
| +------------+ |
+----------------------------------------------------------------------------------+Der ganze Kasten soll eine "Zeilenbox" darstellen, die von Text erzeugt wird. Irgendwelche Boxen, die von Inlineelementen erzeugt werden, werden dann zu dieser Zeilenbox ausgerichtet. Die erste Inlinebox hat vertical-align: middle;, die zweite vertical-align: top; und die dritte vertical-align: bottom; Eine Zeilenbox wird von einem Blockelement "oben" erzeugt.
Einzig bei Tabellenzellen wirkt sich vertical-align so aus, wie Du es willst.
Viele Grüße,
Christian-
Hallo,
Der ganze Kasten soll eine "Zeilenbox" darstellen, die von Text erzeugt wird. Irgendwelche Boxen, die von Inlineelementen erzeugt werden, werden dann zu dieser Zeilenbox ausgerichtet. Die erste Inlinebox hat vertical-align: middle;, die zweite vertical-align: top; und die dritte vertical-align: bottom;
Unter http://jendryschik.de/wsdev/einfuehrung/css/ausrichtung.html#vertical-align gibt es dazu ein Beispiel und einen Screenshot.
Eine Zeilenbox wird von einem Blockelement "oben" erzeugt.
Dem würde ich widersprechen, aber vielleicht hast du dich nur ungeschickt ausgedrückt?
Einzig bei Tabellenzellen wirkt sich vertical-align so aus, wie Du es willst.
Es sei denn natürlich, man arbeitet mit schmutzigen Tricks, aber das werden wir hier niemandem empfehlen. ;-)
Gruß,
MI
--
: Michael Jendryschik : michael@jendryschik.de : http://jendryschik.de/ :
: Einführung in XHTML, CSS und Webdesign : http://jendryschik.de/wsdev/ :
: Die Domain http://best-of-netdigest.de steht bei sedo.de zum Verkauf. :
: http://www.sedo.de/search/showdetails.php3?keyword=best-of-netdigest.de :-
Hallo Michael,
Eine Zeilenbox wird von einem Blockelement "oben" erzeugt.
Dem würde ich widersprechen, aber vielleicht hast du dich nur ungeschickt ausgedrückt?
Ungeschickt ausgedrückt habe ich mich sicherlich, allerdings weiß ich nicht, ob wir dabei an dasselbe denken. Was meinst Du denn genau?
Viele Grüße,
Christian-
Um nochmal zurückzukommen. ICh habe ein a mit width:300px und höhe 100px. Wie kann ich den Text nun vertikal zentrieren ?
Gruß
Hanno-
Hallo,
ICh habe ein a mit width:300px und höhe 100px.
Du meinst
a {
width: 300px;
height: 100px;
}? Das allein bringt so nichts. Die Eigenschaften 'width' und 'height' lassen sich nur auf Block-Elemente und solche Elemente, deren Dimensionen in CSS bereits bekannt sind (so genannte "replaced elements") anwenden. Letzteres sind Elemente wie 'object', 'textarea' oder 'img'.
Wie kann ich den Text nun vertikal zentrieren ?
^
BTW: Hier kommt kein Leerzeichen hin!Zu deine Problem: Du hast bereits gelesen, dass 'vertical-align' sich nur auf Inline-Elemente oder Tabellenzellen (bzw. auf Elemente mit 'display:inline' oder 'display:table-cell') anwenden lässt. Arbeite also mit Tabellen, wenn es denn sein muss, oder der Eigenschaft 'display' falls sich dein Ziel so erreichen lässt. Woran genau scheiterst du nun?
Gruß,
MI
--
: Michael Jendryschik : michael@jendryschik.de : http://jendryschik.de/ :
: Einführung in XHTML, CSS und Webdesign : http://jendryschik.de/wsdev/ :
: Die Domain http://best-of-netdigest.de steht bei sedo.de zum Verkauf. :
: http://www.sedo.de/search/showdetails.php3?keyword=best-of-netdigest.de :
-
-
Hallo,
Eine Zeilenbox wird von einem Blockelement "oben" erzeugt.
Dem würde ich widersprechen, aber vielleicht hast du dich nur ungeschickt ausgedrückt?
Ungeschickt ausgedrückt habe ich mich sicherlich, allerdings weiß ich nicht, ob wir dabei an dasselbe denken. Was meinst Du denn genau?
Ein Blockelement kann mehrere Zeilenboxen enthalten, jede Zeile eines Textabsatzes zum Beispiel erzeugt eine eigene Zeilen-Box. In http://forum.de.selfhtml.org/archiv/2003/4/44661/#m243736 habe ich das ausführlicher dargestellt. Daher verstehe ich nicht, was du mit "oben" meinst.
Gruß,
MI
--
: Michael Jendryschik : michael@jendryschik.de : http://jendryschik.de/ :
: Einführung in XHTML, CSS und Webdesign : http://jendryschik.de/wsdev/ :
: Die Domain http://best-of-netdigest.de steht bei sedo.de zum Verkauf. :
: http://www.sedo.de/search/showdetails.php3?keyword=best-of-netdigest.de :-
Hallo Michael,
Ein Blockelement kann mehrere Zeilenboxen enthalten, jede Zeile eines Textabsatzes zum Beispiel erzeugt eine eigene Zeilen-Box. In http://forum.de.selfhtml.org/archiv/2003/4/44661/#m243736 habe ich das ausführlicher dargestellt. Daher verstehe ich nicht, was du mit "oben" meinst.
Nein, ich meinte, dass Zeilenboxen (in der Regel) von oben nach unten in ein Blockelement gelegt werden und nicht "mittig" positioniert werden.
Viele Grüße,
Christian
-
-
-
-
-
-
Hallo,
Gibt es wie für align -> text-align auch für valign ein css attribut ?
Die CSS-Eigenschaft 'text-align' ersetzt das HTML-Attribut 'align' nicht vollständig.
div { text-align: center }
bedeutet nicht
<div align="center">
! Das kannst du leicht selbst überprüfen.
Gruß,
MI
--
: Michael Jendryschik : michael@jendryschik.de : http://jendryschik.de/ :
: Einführung in XHTML, CSS und Webdesign : http://jendryschik.de/wsdev/ :
: Die Domain http://best-of-netdigest.de steht bei sedo.de zum Verkauf. :
: http://www.sedo.de/search/showdetails.php3?keyword=best-of-netdigest.de :