顶格内对齐文本和图像
问题描述:
这里呈现的HTML:顶格内对齐文本和图像
<div style="padding-left: 50px; vertical-align: middle;">
<strong>NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
一般CSS:
div {
font-size:smaller;
padding:5px 5px 0 0;
float:left;
}
这里的设计是什么样子的萤火:
我会像文字NONE在顶部对齐,就像图像(复选框)对齐的方式。任何想法如何用CSS做到这一点?
答
vertical-align: middle
不会做你认为它的工作。
<div style="padding-left: 50px;">
<strong style="float: left;">NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
答
问题是,顶部的线条高度会与您的图片的高度一致。为了补偿,可以将“无”文本放入块元素中,然后在那里设置对齐。这里将举一个例子:
<div style="padding-left: 50px; vertical-align: middle;">
<div style="height:15px; width:50px; float:left;">NONE</div>
<img style="height:15px; width:15px; float:left;" src="images/Checked.gif" alt="" />
<br style="clear:both;" />
<span style="font-size:larger;">DEFAULT</span>
</div>
从这里你可以玩填充和对齐内部围绕无文本的div。
答
几件事情:
- 既然你知道你的形象的高度,以得到你想要的精确定位,可以尝试设置
line-height
。您可以将它设置为15px或1(仅1,无单位),并查看您的偏好。 - 更改垂直对齐的值。它旨在控制两个内联(或内嵌块)项目的垂直对齐。当你有
strong
旁边的img
时,你只有middle
不符合你的要求。其他适合跨浏览器工作的值是baseline
,top
,bottom
,有时text-top
或text-bottom
。 - 除此之外,你可以同时设置
img
和strong
到block
和使用float
,height
和padding
。
例子:
<div style="padding-left: 50px; line-height: 15px;">
<strong>NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
<div style="padding-left: 50px; vertical-align: top;">
<strong>NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
别人已经下花车的例子。
+0
谢谢!我非常欣赏这一努力。 – Niklas 2011-05-03 15:32:20
答
这些答案没有工作对我来说,这里就是我得到了它的工作...
<div style="line-height:0px;">
<span style="vertical-align:middle;">test</span>
<img src="myimage.png" style="vertical-align:middle;" />
</div>
给容器元素(在我的例子中,<div>
)元素的行高属性0像素的值;那么你想在线上的一切应该有一个vertical-align:middle
;风格应用。
经过Chrome,FF,IE7 +测试...
你说得对,谢谢。 – Niklas 2011-05-03 14:42:45
如果你想要一个垂直居中的快捷方式,可以设置一个像100px一样的高度,并给该元素一个“100px”的“行高”。这垂直居中一行文本。 '50px'的'line-height'有两个,等等。 – Blender 2011-05-03 14:44:01