1. 首页
  2. 问题
  3. 如何在div中垂直对齐图像
一尘不染

如何在div中垂直对齐图像

css

如何在容器中对齐图像div？

例

在我的例子，我需要垂直居中的<img>在<div>用class ="frame“：

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame的高度是固定的，图像的高度是未知的。.frame如果这是唯一的解决方案，则可以添加新元素。我正在尝试在Internet Explorer
7和更高版本的WebKit，Gecko上执行此操作。

在这里查看jsfiddle 。

.frame {

    height: 25px;      /* Equals maximum image height */

    line-height: 25px;

    width: 160px;

    border: 1px solid red;



    text-align: center;

    margin: 1em 0;

}

img {

    background: #3A6F9A;

    vertical-align: middle;

    max-height: 25px;

    max-width: 160px;

}


<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>

阅读 250

收藏
2020-05-16

共1个答案

一尘不染

唯一的（和最好的跨浏览器）的方式，因为我知道是使用inline-block佣工height: 100%，并vertical-align: middle在这两个元素。

因此，有一个解决方案：http :
//jsfiddle.net/kizu/4RPFa/4570/

.frame {

    height: 25px;      /* Equals maximum 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=250px />

</div>

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />

</div>

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />

</div>

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />

</div>

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=17px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=15px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=13px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=11px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=9px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=7px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=5px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=3px />

</div>

或者，如果您不想在现代浏览器中添加多余的元素并且不介意使用Internet
Explorer表达式，则可以使用伪元素，然后使用方便的表达式将其添加到Internet
Explorer，该表达式每个元素仅运行一次，因此不会有任何性能问题：

通过该解决方案:before，并expression()为Internet
Explorer：http://jsfiddle.net/kizu/4RPFa/4571/

.frame {

    height: 25px;      /* Equals maximum 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=250px /></div>

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

怎么运行的：

  1. 当两个inline-block元素彼此靠近时，可以使彼此的边对齐，这样vertical-align: middle您将得到如下所示：

两个对齐的块

  1. 当你有固定的高度（在一个块中px，em或另一个绝对值单元），可以设置在内部块的高度%。

  2. 所以，加入一个inline-block具有height: 100%与固定高度块将对准另一inline-block它元素（<img/>你的情况），垂直接近它。

2020-05-16