div內部圖像的垂直對齊
[英]vertical alignment of image inside a div
問題描述
我想在div中設置圖像的垂直對齊方式。 我使用img {vertical-align：middle}但它不起作用。
6 個解決方案
解決方案1
16 2011-03-25 06:15:37
使用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>
解決方案2
6 2011-03-29 17:01:44
這是一個不需要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 styles。
解決方案3
2 2013-07-01 02:40:24
看到這個問題： 如何垂直對齊div內的圖像
如果你想也水平對齊，加上right和left ，就像這樣：
div {
position:relative;
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
解決方案4
2 2011-03-25 06:31:38
如果你想按照我的想法行事，那么垂直對齊是行不通的; 你需要使用定位。
通常，將容器放置在相對位置，然后將圖像置於絕對位置，將頂部和左側設置為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 */
}
解決方案5
0 2011-03-25 06:23:17
如果將div display屬性設置為table-cell則vertical-align: middle; 將工作。
vertical-align規則僅影響具有display: table-cell表格單元格或元素。
有關詳細說明，請參閱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>
解決方案6
0 2011-03-25 10:50:49
以下帖子有一些有用的參考：
此外，根據您要測試的IE版本，您最終可能需要一些特定於瀏覽器的黑客或一些jQuery / JavaScript代碼。
如果必須，請使用單行單細胞表並利用vertical-align屬性。 這是一種蠻力，而不是過於語義，但它有效。
div中圖像的CSS垂直對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.