如何在div中垂直对齐图像

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

实例

在我的示例中，我需要使用class=“frame”将＜img＞垂直居中放置在＜div＞中：

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

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

看到这里的jsfiddle。

.框架{高度：25px；/*等于最大图像高度*/线条高度：25px；宽度：160px；边框：1px纯红色；文本对齐：居中；边距：1em 0；}国际货币基金组织{背景：#3A6F9A；垂直对齐：中间；最大高度：25px；最大宽度：160px；}＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=250/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=25/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=23/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=21/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=19/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=17/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=15/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=13/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=11/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=9/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=7/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=5/></div>＜div class＝frame＞<img src=“http://jsfiddle.net/img/logo.png“高度=3/></div>

当前回答

想象一下你有

<div class="wrap">
    <img src="#">
</div>

和css：

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

2019-08-25 13:17:13

其他回答

使用table和table cell方法完成这项工作，特别是因为您也针对一些旧浏览器，我为您创建了一个代码段，您可以运行它并检查结果：.包装器{位置：相对；显示：表格；宽度：300px；高度：200px；}.内部{垂直对齐：中间；显示：表格单元格；}<div class=“wrapper”><div class=“inside”><p>请让我居中</p＞</div><div class=“inside”><img src=“https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" /></div></div>

2017-06-28 13:51:25

除了像这样的文本外，还可以将图像居中放置在容器内（可以是徽标）：

基本上，您可以包装图像

.外框{边框：1px纯红色；最小高度：200px；文本对齐：居中；/*仅水平对齐*/}.包装器{线条高度：200px；边框：2px蓝色虚线；边框半径：20px；边距：50px}国际货币基金组织{/*高度：自动*/垂直对齐：中间；/*仅垂直对齐*/}<div class=“外框”><div class=“wrapper”>一些文本<img src=“http://via.placeholder.com/150x150"></div></div>

2017-08-31 01:36:16

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

关键属性是显示：表单元格；for.frame.Div.frame显示为与此内联，因此需要将其包装在块元素中。

这适用于Firefox、Opera、Chrome、Safari和Internet Explorer 8（及更高版本）。

更新

对于Internet Explorer 7，我们需要添加一个CSS表达式：

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

2011-09-04 18:04:36

matejkramny的解决方案是一个良好的开端，但超大图像的比例错误。

这是我的叉子：

演示：https://jsbin.com/lidebapomi/edit?html，css，输出

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

2013-09-18 09:53:32

使用纯CSS尝试此解决方案http://jsfiddle.net/sandeep/4RPFa/72/

也许这是HTML的主要问题。在HTML中定义类和图像高度时，不使用引号。

CSS:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    position: relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height: 0;
    margin: 0 auto;
    max-height: 25px;
}

当我处理img标记时，它会从顶部留出3像素到2像素的空间。现在我降低了线的高度，它开始工作了。

CSS:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height: 0;    
        max-height: 25px;
        max-width: 160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* WebKit browsers */
    }

线条高度属性在不同的浏览器中呈现不同。因此，我们必须定义不同的线宽属性浏览器。

检查此示例：http://jsfiddle.net/sandeep/4be8t/11/

查看以下关于不同浏览器中线条高度差异的示例：Firefox和Chrome中的输入高度差异

2011-09-05 12:26:33

如何在div中垂直对齐图像

推荐文章

最新文章

标签