我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。
怎样才能做到呢?
我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..
我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。
怎样才能做到呢?
我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..
当前回答
使用定位。下面的方法对我很有效:
div{
display:block;
overflow:hidden;
width: 200px;
height: 200px;
position: relative;
}
div img{
width: 50px;
height: 50px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
其他回答
我有这个问题在HTML5中使用CSS3和我的图像在DIV中居中…哦,是的,我不能忘记我必须增加高度来显示图像…有一段时间我不知道它在哪里,直到我做了这个。我不认为位置和显示是必要的。
background-image: url('../Images/01.png');
background-repeat:no-repeat;
background-position:center;
position:relative;
display:block;
height:60px;
在CSS中这样做:
img
{
display:table-cell;
vertical-align:middle;
margin:auto;
}
另一种方法(此处未提及)是使用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。
当您知道容器div的大小,但不知道包含的图像的大小时,这是有用的。(这是在使用灯箱或图像旋转木马时经常出现的情况)。
以下是你应该尝试的发型:
container div
{
display:table-cell;
vertical-align:middle;
height:200px;
width:200px;
}
img
{
/*Apply any styling here*/
}
这是一种老式的解决方案,但浏览器市场份额已经足够大了,如果你不担心IE7的性能下降,你可能不需要IE黑客的部分。当你知道外部容器的尺寸,但可能知道也可能不知道内部图像的尺寸时,这种方法是有效的。
.parent {
display: table;
height: 200px; /* can be percentages, too, like 100% */
width: 200px; /* can be percentages, too, like 100% */
}
.child {
display: table-cell;
vertical-align: middle;
margin: 0 auto;
}
<div class="parent">
<div class="child">
<img src="foo.png" alt="bar" />
</div>
</div>