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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:24:05  来源:igfitidea点击:

Top align text and image within div

htmlcsscss-floatvertical-alignment

提问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:
enter image description here

下面是 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 to img, it's just that middledoesn't look the way you want. Other values that work reasonably well cross-browser are baseline, top, bottomand sometimes text-topor text-bottom.
  • Beyond that, you can set both the imgand the strongto blockand use float, height, and padding.
  • 由于您知道图像的高度,要获得所需的精确对齐,请尝试设置line-height. 您可以将其设置为 15px 或 1(仅 1,无单位),然后看看您喜欢哪个。
  • 更改垂直对齐的值。它旨在控制彼此相邻的两个内联(或内联块)项目的垂直对齐方式。当您拥有strong旁边时img,这就是您所拥有的,只是middle看起来不像您想要的那样。其他在跨浏览器中运行良好的值是baseline, topbottom有时text-toptext-bottom
  • 除此之外,您可以同时设置 theimg和 the strongtoblock并使用floatheight、 和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 内围绕无文本进行填充和对齐。