题
如何在包含内部对齐图像 div
?
例
在我的例子中,我需要垂直居中 <img>
在里面 <div>
同 class ="frame
“:
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
.frame
高度是固定的,图像的高度是未知的。我可以添加新元素 .frame
如果这是唯一的解决方案。我试图在IE≥7,Webkit,Gecko上做这个。
看到jsfiddle 这里
我所知道的唯一(也是最好的跨浏览器)方式是使用 inline-block
帮手 height: 100%
和 vertical-align: middle
在这两个元素上。
所以有一个解决方案: http://jsfiddle.net/kizu/4RPFa/4570/
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap; /* this is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
<div class=frame>
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>
或者,如果您不想在现代浏览器中有额外的元素并且不介意使用IE表达式,您可以使用伪元素并使用方便的表达式将其添加到IE,每个元素只运行一次,所以没有任何性能问题:
解决方案 :before
和 expression()
对于IE: http://jsfiddle.net/kizu/4RPFa/4571/
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame:before,
.frame_before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
/* Move this to conditional comments */
.frame {
list-style:none;
behavior: expression(
function(t){
t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
t.runtimeStyle.behavior = 'none';
}(this)
);
}
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=250 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=25 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=23 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=21 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=19 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=17 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=15 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=13 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=11 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=9 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=7 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=5 /></div>
<div class=frame><img src="http://jsfiddle.net/img/logo.png" height=3 /></div>
怎么运行的:
当你有两个 inline-block
彼此靠近的元素,你可以将每个元素对齐到另一边,所以用 vertical-align: middle
你会得到这样的东西:

当你有一个固定高度的块(在 px
, em
或者其他绝对单位),你可以设置内部块的高度 %
。
- 所以,加一个
inline-block
同 height: 100%
在具有固定高度的块中将对齐另一个 inline-block
元素在里面(<img/>
在你的情况下)垂直靠近它。
这可能很有用:
div {
position:relative;
width:200px;
height:200px;
}
img {
position:absolute;
top:0;
bottom:0;
margin:auto;
}
.image {
min-height:50px
}
参考: http://www.student.oulu.fi/~laurirai/www/css/middle/
matejkramny的解决方案是一个良好的开端,但超大的图像有一个错误的比例。
这是我的分叉:
演示: https://jsbin.com/lidebapomi/edit?html,css,output

HTML:
<div class="frame">
<img src="foo"/>
</div>
CSS:
.frame {
height: 160px; /*can be anything*/
width: 160px; /*can be anything*/
position: relative;
}
img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
3线解决方案:
position: relative;
top: 50%;
transform: translateY(-50%);
这适用于任何事情。
从 这里。
一个纯粹的CSS解决方案:
http://jsfiddle.net/3MVPM/
CSS:
.frame {
margin: 1em 0;
height: 35px;
width: 160px;
border: 1px solid red;
position: relative;
}
img {
max-height: 25px;
max-width: 160px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #3A6F9A;
}
关键的东西
// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically
这样您就可以垂直居中(演示):
div{
height:150px; //IE7fix
line-height: 150px;
}
img{
vertical-align: middle;
margin-bottom:0.25em;
}
对于那些登陆这篇文章并且对更现代的解决方案感兴趣并且不需要支持旧版浏览器的人,您可以这样做:
.frame {
display: flex;
/*Uncomment below to center horizontally*/
/*justify-content: center;*/
align-items: center;
}
img {
height: auto;
}
/* Styling stuff not needed for demo */
.frame {
max-width: 900px;
height: 200px;
margin: auto;
background: #222;
}
p {
max-width: 900px;
margin: 20px auto 0;
}
img {
width: 150px;
}
<div class="frame">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>
这是一支钢笔: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e
您可以尝试将PI的CSS设置为 display: table-cell; vertical-align: middle;