我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。
怎样才能做到呢?
我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..
我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。
怎样才能做到呢?
我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..
当前回答
这对我来说很管用:
<body>
<table id="table-foo">
<tr><td>
<img src="foo.png" />
</td></tr>
</table>
</body>
<style type="text/css">
html, body {
height: 100%;
}
#table-foo {
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
#table-foo img {
display: block;
margin: 0 auto;
}
</style>
其他回答
另一种方法(此处未提及)是使用Flexbox。
只需在container div上设置以下规则:
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
小提琴
div { 宽度:200 px; 身高:200 px; 边框:1px纯绿色; 显示:flex; justify-content:中心; /*对齐水平*/ 对齐项目:中心; /*垂直对齐*/ } < div > < img src = " http://lorempixel.com/50/50/food " alt = " / > < / div >
要了解Flexbox的一些特性并获得最大限度的浏览器支持的语法,最好从flexyboxes开始
此外,现在的浏览器支持也相当不错:caniuse
对于显示:flex和align-items的跨浏览器兼容性,您可以使用以下命令:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
在div中
style="text-align:center; line-height:200px"
将图像垂直和水平居中的最好方法是使用两个容器,并应用以下属性:
外面的容器
应有显示:表;
内容器
应该有display: table-cell; 应该有垂直对齐:中间; 应该有text-align: center;
一个演示
.outer-container { display: table; width: 80%; /* can be any width */ height: 120px; /* can be any height */ background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .inner-container img { background: #fff; padding : 10px; border : 1px solid #000; } <div class="outer-container"> <div class="inner-container"> <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" /> </div> </div>
就我个人而言,我会把它作为div的背景图像,CSS是这样的:
#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}
(假设一个id="demo"的div,因为你已经指定了高度和宽度,添加背景应该不是问题)
让浏览器承担压力。
这是正确的:
display: block;
margin-left: auto;
margin-right: auto
否则,如果上面只给你水平居中,试试这个:
.outerContainer {
position: relative;
}
.innerContainer {
width: 50px; //your image/element width here
height: 50px; //your image/element height here
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}