Html 在 div 中顶部对齐文本和图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5871176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Top align text and image within div
提问by Niklas
Here's the rendered html:
这是呈现的 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>
general css:
一般CSS：
div {
font-size:smaller;
padding:5px 5px 0 0;
float:left;
}
Here's what the design looks like in firebug:
下面是 firebug 中的设计：
I would like the text NONEto align at the top, just the way the image (checkbox) is aligned. Any ideas on how to do this with css?
我希望文本NONE在顶部对齐，就像图像（复选框）对齐的方式。关于如何用 css 做到这一点的任何想法？
采纳答案by Blender
vertical-align: middledoesn't do what you think it does.
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>
回答by morewry
Couple of things:
几件事：
- Since you know the height of your image, to get the exact alignment you want, try setting a
line-height. You can set it at 15px or 1 (just 1, no unit), and see which you prefer. - Change your value for vertical-align. It's meant to control the vertical alignment of two inline (or inline-block) items next to each other. Which is what you have when you have
strongnext toimg, it's just thatmiddledoesn't look the way you want. Other values that work reasonably well cross-browser arebaseline,top,bottomand sometimestext-toportext-bottom. - Beyond that, you can set both the
imgand thestrongtoblockand usefloat,height, andpadding.
- 由于您知道图像的高度，要获得所需的精确对齐，请尝试设置
line-height. 您可以将其设置为 15px 或 1（仅 1，无单位），然后看看您喜欢哪个。 - 更改垂直对齐的值。它旨在控制彼此相邻的两个内联（或内联块）项目的垂直对齐方式。当您拥有
strong旁边时img，这就是您所拥有的，只是middle看起来不像您想要的那样。其他在跨浏览器中运行良好的值是baseline,top，bottom有时text-top或text-bottom。 - 除此之外，您可以同时设置 the
img和 thestrongtoblock并使用float、height、 和padding。
Examples:
例子：
<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>
Others have already down an example with floats.
其他人已经用浮点数做了一个例子。
回答by Jeff Johnson
These answers didn't work for me, here's how I got it working...
这些答案对我不起作用，这是我的工作方式...
<div style="line-height:0px;">
<span style="vertical-align:middle;">test</span>
<img src="myimage.png" style="vertical-align:middle;" />
</div>
give the container element (in my example, the <div>) element a line-height attribute value of 0px; then everything you want on the line should have a vertical-align:middle; style applied.
为容器元素（在我的示例中为<div>）元素提供 0px 的 line-height 属性值；那么你想要的一切都应该有一个vertical-align:middle; 样式应用。
Tested in Chrome, FF, IE7+...
在 Chrome、FF、IE7+ 中测试...
回答by Joe
The issue is that the line height on the top is going to conform to however high your image is. To compensate, you can put the "none" text in a block element, and then set your alignment in there. Here would be an example:
问题是顶部的行高将符合您的图像有多高。作为补偿，您可以将“无”文本放在块元素中，然后在其中设置对齐方式。下面是一个例子：
<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>
From here you can play with the padding and alignment within that div around the none text.
从这里您可以在该 div 内围绕无文本进行填充和对齐。
