顶格内对齐文本和图像

这里呈现的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; 
}

这里的设计是什么样子的萤火：
enter image description here

我会像文字NONE在顶部对齐，就像图像（复选框）对齐的方式。任何想法如何用CSS做到这一点？

来源

2011-05-03 Niklas

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>

来源

2011-05-03 14:40:24 Blender

你说得对，谢谢。 – Niklas 2011-05-03 14:42:45

如果你想要一个垂直居中的快捷方式，可以设置一个像100px一样的高度，并给该元素一个“100px”的“行高”。这垂直居中一行文本。 '50px'的'line-height'有两个，等等。 – Blender 2011-05-03 14:44:01

问题是，顶部的线条高度会与您的图片的高度一致。为了补偿，可以将“无”文本放入块元素中，然后在那里设置对齐。这里将举一个例子：

<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。

来源

2011-05-03 14:44:09 Joe

几件事情：

既然你知道你的形象的高度，以得到你想要的精确定位，可以尝试设置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>

别人已经下花车的例子。

来源

2011-05-03 14:48:21 morewry

谢谢！我非常欣赏这一努力。 – 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 +测试...

来源

2012-08-24 20:50:52

顶格内对齐文本和图像

回答

相关问题