vertical-align：bottom not working [英] vertical-align:bottom not working
问题描述
嗨
我对垂直对齐有一个奇怪的问题。案件可以在
http://www.brainput.info/查看geschichte.html 。
HTML code：
< div id =" bild">< img src = QUOT; geschichte.gif"宽度= QUOT; 274"高度= QUOT; 29" alt =" Wir
schreiben die Geschichte Ihres Unternehmens。">< / div>
CSS代码：
#bild {
宽度：600px;
身高：76px;
保证金：0px 0px 0px 50px;
vertical-align：bottom;
}
img {
vertical-align：top;
}
#bild img {
vertical-align：bottom;
}
现在图像应该显示在div的底部，或者我错了？
IE6和Netscape 7都显示在顶部。
奇怪的是：添加text-align：right到#bild img定义是
也不起作用，但当我添加border：5px solid blue时图像将以蓝色边框显示为
。因此选择器必须是正确的。
我很困难;如果有人看到错误的地方我将非常高兴
关于它。
谢谢
Markus
Hi
I have a strange problem with vertical-align. The case can be viewed at
http://www.brainput.info/geschichte.html.
HTML code:
<div id="bild"><img src="geschichte.gif" width="274" height="29" alt="Wir
schreiben die Geschichte Ihres Unternehmens."></div>
CSS code:
#bild {
width: 600px;
height: 76px;
margin: 0px 0px 0px 50px;
vertical-align:bottom;
}
img {
vertical-align:top;
}
#bild img {
vertical-align:bottom;
}
Now the image should be displayed at the bottom of the div, or am I wrong?
Both IE6 and Netscape 7 display it at the top.
Strange enough: Adding "text-align:right" to the "#bild img" definition is
not working either, but when I add "border:5px solid blue" the image will be
displayed with the blue border. So the selectors must be correct.
I am quite stuck; if somebody sees where the mistake is I will be very happy
about it.
Thanks
Markus
推荐答案
在文章中Markus Ernst写道：
In article Markus Ernst wrote:
嗨
我对vertical-align有一个奇怪的问题。案件可以在
http://www.brainput.info/查看geschichte.html 。
这是因为你误解了纵向对齐是如何工作的。
现在图像应该显示在div的底部，或者我错了？
IE6和Netscape 7都显示在顶部。
你错了。使用行高。看到这个主题（关于居中）：
http://gogle.de/gr****** ************ ... ews.cis.dfn.de
奇怪的是：添加text-align：right到#bild img定义也不起作用，但当我添加border：5px solid blue时图像将以蓝色边框显示。所以选择器必须是正确的。
Hi
I have a strange problem with vertical-align. The case can be viewed at
http://www.brainput.info/geschichte.html.
It is because you have misunderstood how vertical-align works.
Now the image should be displayed at the bottom of the div, or am I wrong?
Both IE6 and Netscape 7 display it at the top.
You are wrong. Use line-height. See this thread (about centering):
http://gogle.de/gr******************...ews.cis.dfn.de
Strange enough: Adding "text-align:right" to the "#bild img" definition is
not working either, but when I add "border:5px solid blue" the image will be
displayed with the blue border. So the selectors must be correct.
多数民众赞成因为vertical-align只适用于内联元素，而text-
只对齐阻止元素。
-
Lauri Raittila< http://www.iki.fi/lr> < http://www.iki.fi/zwak/fonts>
Saapi l？hett ?? meili？，jos aihe ei liity ryhm ?? n，tai on yksityinen
tjsp。，mutta？l？ L·海特？ samaa viesti？ meilitse ja ryhm ?? n。
Thats because vertical-align only aplies to inline-elements, and text-
align only to block elements.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi l?hett?? meili?, jos aihe ei liity ryhm??n, tai on yksityinen
tjsp., mutta ?l? l?het? samaa viesti? meilitse ja ryhm??n.
Lauri Raittila写道：
Lauri Raittila wrote:
那是因为vertical-align只适用于内联元素和text-
只对齐块元素。
Thats because vertical-align only aplies to inline-elements, and text-
align only to block elements.
内联元素;-)
-
Anne van Kesteren
< http://www.annevankesteren.nl/>
''text-align'' does not apply to block-level elements. It does apply to
inline elements as well ;-)
--
Anne van Kesteren
<http://www.annevankesteren.nl/>
文章Anne van Kesteren写道：
In article Anne van Kesteren wrote:
Lauri Raittila写道：
Lauri Raittila wrote:
多数民众赞成因为vertical-align仅适用于内联元素，而text-
仅与块元素对齐。
Thats because vertical-align only aplies to inline-elements, and text-
align only to block elements.
''text-align ''不适用于块级元素。它也适用于
内联元素; - ）
''text-align'' does not apply to block-level elements. It does apply to
inline elements as well ;-)
我使用的术语适用于CSS的含义。 Spec明确表示
text-align仅适用于块元素。
http://www.w3.org/TR/CSS2/text.html#alignment-prop
|适用于：块级元素
http://www.w3.org/TR/CSS21/text.html#alignment-prop
|适用于：块级元素和表格单元格
-
Lauri Raittila< http://www.iki.fi/lr> < http://www.iki.fi/zwak/fonts>
Saapi l？hett ?? meili？，jos aihe ei liity ryhm ?? n，tai on yksityinen
tjsp。，mutta？l？ L·海特？ samaa viesti？ meilitse ja ryhm ?? n。
I used term applies in the meaning CSS has for it. Spec clearly says that
that text-align only applies to block elements.
http://www.w3.org/TR/CSS2/text.html#alignment-prop
| Applies to: block-level elements
http://www.w3.org/TR/CSS21/text.html#alignment-prop
| Applies to: block-level elements and table cells
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi l?hett?? meili?, jos aihe ei liity ryhm??n, tai on yksityinen
tjsp., mutta ?l? l?het? samaa viesti? meilitse ja ryhm??n.
这篇关于vertical-align：bottom not working的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
