如何在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>

当前回答

我为这个老问题添加了一个新的解决方案，因为我发现答案中没有包含我的首选方法。

在每个项目中，在一开始，我创建了2个CSS类

.flex-centered {
    display: flex; 
    flex-direction-column; 
    justify-content:center
}
.abs-centered {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%)
}

根据情况，您可以将两种元素置于中心。

flex centre对于页面上的图像和内容更加通用，abs居中需要一个相对的父级，这对居中的div很好，就像弹出窗口一样。

所以你只要打电话

   <div class='flex-centered'>
        <img>
    </div>

并且图像垂直居中。

.flex居中{显示：柔性；弯曲方向：柱；对齐内容：中心；}/*这也是水平居中*/.m0a时{边距：0自动}/*让一个大家长变成灰色*/.大div｛高度：200px；宽度：200px；背景：#ccc；边界半径：4px；}/*制作一个小div以居中*/.small div｛高度：20px；宽度：20px；背景：红色；}<div class=“flex center big div”><div class=“small div m0a”></div></div>

2022-06-10 08:16:21

其他回答

flexbox有一个超级简单的解决方案！

.frame {
    display: flex;
    align-items: center;
}

2016-04-21 00:56:41

您可以使用此选项：

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

2018-09-19 12:52:17

我也有同样的问题。这对我有用：

<style type="text/css">
    div.parent {
        position: relative;
    }

    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<div class="parent">
    <img class="child">
</div>

2013-01-26 19:46:52

我不确定InternetExplorer，但在Firefox和Chrome下，如果您在div容器中有img，以下CSS内容应该可以工作。至少对我来说，它工作得很好：

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

2014-01-29 07:10:19

最好的解决方案是

.block{
    /* Decor */
    padding:0 20px;
    background: #666;
    border: 2px solid #fff;
    text-align: center;
    /* Important */
    min-height: 220px;
    width: 260px;
    white-space: nowrap;
}
.block:after{
    content: '';
    display: inline-block;
    height: 220px; /* The same as min-height */
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
    vertical-align: middle;
}
.block span{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
}

2015-02-03 06:16:33

如何在div中垂直对齐图像

推荐文章

最新文章

标签