如何垂直对齐div内的图像？

题

如何在包含内部对齐图像div？

例

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

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

Run Code Online (Sandbox Code Playgroud)

.frame高度固定,图像高度未知..frame如果这是唯一的解决方案,我可以添加新元素.我试图在IE≥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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

css image vertical-alignment

Arn*_*anc

2019 07-12

1371
推荐指数

23
解决办法

150万
查看次数

如何将图像放在html页面的中心？

可能重复:
如何水平和垂直居中div

我需要把图像放在html页面的中心,纵向和横向......一直在尝试一些东西,但似乎工作正常.为了得到我使用的水平对齐 <body style="text-align:center">

它工作正常,但垂直对齐怎么办？

问候

html css vertical-alignment

Dar*_*dic

2017 05-23

14
推荐指数

2
解决办法

10万
查看次数

flexbox可以水平和垂直居中图像而不拉伸它们吗？

我想让图像在容器内水平和垂直居中.如果它们的宽度或高度大于容器的宽度或高度,那么在保持其比例的同时使它们自动收缩.

我在容器上使用以下CSS代码来尝试实现目标:

display: -ms-flexbox;
display: -webkit-flex;
display:         flex;
    -ms-flex-direction: column;
-webkit-flex-direction: column;
        flex-direction: column;
          -ms-flex-pack: center;
-webkit-justify-content: center;
        justify-content: center;

Run Code Online (Sandbox Code Playgroud)

而且这里有上的jsfiddle三个例子: