div内图像的垂直对齐
Posted
技术标签:
【中文标题】div内图像的垂直对齐【英文标题】：vertical alignment of image inside a div 【发布时间】：2011-07-22 16:36:33 【问题描述】：我想在 div 中设置图像的垂直对齐方式。我使用 img vertical-align:middle 但它不起作用。
【问题讨论】：
可能相关：***.com/questions/3535689/…. 作为新手，您可能想要对其中一些答案进行投票，因为它们为您指明了正确的方向，而且我们都在工作/生活中抽出时间互相帮助。跨度> 【参考方案1】：使用line-height 属性可以解决问题：
<style>
.someclass
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
border: dotted;
.someclass img
margin: auto;
vertical-align: middle;
</style>
<div class="someclass">
<img src="someimg.jpg" border="0" >
</div>
【讨论】：
因为你可能不得不引入缩放 与显示表格单元格相比，这对 IE7 来说就像一个魅力。谢谢！ table-cell made height:100% 在我的情况下停止工作。【参考方案2】：看到这个awser：How to vertical align image inside div
如果您还想水平对齐，请添加right 和left，如下所示：
div
position:relative;
img
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
【讨论】：
【参考方案3】：这是一个不需要 javascript 的解决方案（就像我之前的解决方案一样）。
您可以通过将 display: table-cell 分配给包含的 div 来实现您想要的。这是一个例子：http://jsbin.com/evuqo5/2/edit
我觉得我必须警告您，您将需要在您打算支持的每个浏览器中对此进行测试。对 table-cell 值的支持是相当新的，尤其是在 Firefox 中。我知道它适用于 Firefox 4，但我不知道任何 3.x 迭代。您还需要在 IE 中进行测试（我只在 Chrome 10 和 Firefox 4 中进行了测试）。
CSS：
div#container
width: 700px;
height: 400px;
position: relative;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
div#container img
margin: 0 auto;
display: block;
如果您不想水平对齐图像，则不需要div#container img 样式。
【讨论】：
如果您需要使用百分比作为高度，这将不起作用，就像我的情况一样。【参考方案4】：如果您将 div display 属性设置为 table-cell，则 vertical-align: middle; 将起作用。
vertical-align 规则仅影响带有display: table-cell 的表格单元格或元素。
详情请见this article from SitePoint。
<style>
/* change body to .someClasses's parent */
body
width: 100%;
height: 100%;
display: table;
body > .someclass
width: 300px;
height: 300px;
text-align: center;
border:dotted;
margin: 0 auto
display: table-cell;
vertical-align: middle;
</style>
<body>
<div class="someclass">
<img src="someimg.jpg" border="0" >
</div>
</body>
【讨论】：
你说得对，我错过了一些东西。我已经更新了代码来工作。如果您真的费心花时间阅读我发布的链接，您就会自己注意到这一点并已经解决了这个问题。请努力实际学习一些东西，而不是简单地寻求答案。【参考方案5】：以下帖子有一些有用的参考：
Text Alignment w/ IE9 in Standards-Mode
此外，根据您测试的 IE 版本，您最终可能需要一些特定于浏览器的 hack 或一些 jQuery/JavaScript 代码。
如果必须，请使用单行一单元格的表格并利用 vertical-align 属性。这是蛮力的，不是过于语义化，但它确实有效。
【讨论】：
【参考方案6】：如果你按照我的想法去做，那么垂直对齐是行不通的；你需要使用定位。
一般来说，将容器相对定位，然后将图像绝对定位，将顶部和左侧设置为 50%，然后通过设置负边距等于宽度/高度的一半将图像移回中心。
这是一个工作示例：http://jsbin.com/evuqo5/edit
基本的 CSS 是这样的：
#container position: relative;
#container img
position: absolute;
left: 50%;
top: 50%;
margin-top: /* -1/2 the height of the image */
margin-left: /* -1/2 the width of the image */
【讨论】：
我不想计算每张图片的高度和宽度 我将发布另一个解决方案，它可以在没有 JavaScript 的情况下工作，但可能并非所有浏览器都支持。 我不知道图片的尺寸。它的宽度设置为百分比，高度未设置，以便按比例缩放。以上是关于div内图像的垂直对齐的主要内容，如果未能解决你的问题，请参考以下文章