我想在div内设置图像的垂直对齐。我使用img {vertical-align:middle} ,但它不起作用。div内图像的垂直对齐
回答
使用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" alt="">
</div>
我使用这段代码,但它不工作在即ie – Deepa 2011-03-25 06:59:12
因为你可能不得不引入变焦 – 2011-03-27 12:59:27
与显示表格单元格相反,这个工作方式像IE7的魅力。谢谢! – 2012-02-14 12:01:20
如果设置了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" alt="">
</div>
</body>
如果你正在尝试做我认为的事,垂直对齐不会奏效;你需要使用定位。
通常,将容器相对放置,然后将图像绝对定位,将顶部和左侧设置为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 */
}
我不想计算每个图像的高度和宽度 – Deepa 2011-03-25 07:03:02
我会发布另一个解决方案,它可以在没有JavaScript的情况下工作,但可能在每个浏览器中都不支持。 – RussellUresti 2011-03-29 17:03:05
不错!它像一个魅力。谢谢 – CHaP 2013-09-15 18:23:23
以下职位有一些有用的参考资料:
Text Alignment w/ IE9 in Standards-Mode
另外,根据哪个版本的如果你正在测试IE,你可能最终需要一些浏览器特定的黑客或一些jQuery/JavaScript代码。
如果必须使用单行单元表并利用vertical-align
属性。这是蛮力,不是过度语义化,但是它起作用。
这是一个不需要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
的风格,如果你不也想水平对齐图像。
如果您需要使用百分比作为高度,那么这将不起作用,因为这是我的情况。 – 2017-03-16 21:15:44
看到这个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;
}
不适用于铬 – 2017-03-16 21:17:29
- 1. CSS:垂直对齐div中的图像
- 2. 垂直对齐其他图像div
- 3. Div与图像垂直对齐
- 4. 试图垂直对齐格内div
- 5. 垂直对齐的图像内锚
- 6. 垂直对齐DIV
- 7. 垂直对齐div
- 8. 图像不能在Safari中的div内垂直对齐
- 9. 垂直对齐div内的img元素
- 10. 垂直对齐div的内容
- 11. 垂直对齐div中的内容
- 12. 试图垂直对齐图标和div
- 13. CSS - 垂直对齐DIV内容
- 14. 中间垂直对齐内嵌块div
- 15. 垂直对齐img内浮动div
- 16. 对齐两个div垂直
- 17. 始终垂直对齐DIV
- 18. 垂直对齐div(无表)
- 19. html div垂直对齐
- 20. 垂直对齐浮动div
- 21. 垂直对齐一个绝对定位的div内含div div
- 22. 垂直对齐列中的图像
- 23. 图像垂直对齐的CSS - 奇怪
- 24. Facebook的照片/图像垂直对齐?
- 25. 垂直对齐图像上的文本
- 26. CSS垂直对齐的图像/文字
- 27. 垂直对齐IE中的图像6
- 28. 垂直对齐div中的div
- 29. 垂直对齐在div中的标签中的中间图像
- 30. 垂直对齐图像的固定高度div
可能相关:http://stackoverflow.com/questions/3535689 /文本在垂直-中间的DIV。 – Blender 2011-03-25 06:00:09
作为一个新手,你可能想对这些答案进行投票,因为他们指出你在正确的方向,我们都在抽出时间离开工作/生活来互相帮助。 – 2011-03-25 10:52:00