如何在div中垂直对齐图像-白红宇

如何在div中垂直对齐图像

阅读量：3576 次

发布时间：2019-05-20

本文共 11759 字，大约阅读时间需要 39 分钟。

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

例

在我的示例中，我需要使用class ="frame ”将<img>在<div>垂直居中：

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

在查看jsfiddle。

.frame { height: 25px; /* Equals maximum  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; }

#1楼

这可能有用：

div {    position: relative;    width: 200px;    height: 200px;}img {    position: absolute;    top: 0;    bottom: 0;    margin: auto;}.image {    min-height: 50px}

参考： :

#2楼

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

#3楼

我的解决方案： :


       
            
         
    
   
.container {    display: table;    float: left;    border: solid black 1px;    margin: 2px;    padding: 0;    background-color: black;    width: 150px;    height: 150px;}.frame {    display: table-cell;    text-align: center;    vertical-align: middle;    border-width: 0;}.img {    max-width: 150px;    max-height: 150px;    vertical-align: middle;}

#4楼

matejkramny的解决方案是一个不错的开始，但是过大的图像比例错误。

这是我的叉子：

演示： :

HTML：

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

#5楼

这样，您可以将图像垂直居中（）：

div{  height: 150px; // Internet Explorer 7 fix  line-height: 150px;}img{  vertical-align: middle;  margin-bottom: 0.25em;}

#6楼

我不确定Internet Explorer，但是在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;}

#7楼

最好的解决方案是

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

#8楼

三行解决方案：

position: relative;top: 50%;transform: translateY(-50%);

这适用于任何东西。

从。

#9楼

一个对我有用的简单方法：

img {    vertical-align: middle;    display: inline-block;    position: relative;}

它非常适合Google Chrome浏览器。在其他浏览器中尝试一下。

#10楼

我一直在使用填充进行中心对齐。您将需要定义顶层外部容器的大小，但是内部容器应调整大小，并且可以将填充设置为不同的百分比值。


     
    
   
.container {  padding: 20%;  background-color: blue;}img {  width: 100%;}

#11楼

对于更现代的解决方案，如果不需要支持旧版浏览器，则可以执行以下操作：

.frame { display: flex; /** Uncomment 'justify-content' below to center horizontally. ✪ Read below for a better way to center vertically and horizontally. **/ /* justify-content: center; */ align-items: center; } img { height: auto; /** ✪ To center this image both vertically and horizontally, in the .frame rule above comment the 'justify-content' and 'align-items' declarations, then uncomment 'margin: auto;' below. **/ /* margin: 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; }

这是一支钢笔： :

#12楼

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

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

#13楼

您可以尝试以下代码：

.frame{ display: flex; justify-content: center; align-items: center; width: 100%; }

#14楼

使用表格和表格单元的解决方案

有时应通过显示为table / table-cell来解决。例如，快速标题屏幕。这也是W3推荐的方式。我建议您检查此链接，该链接称为W3C.org中的“ 。

这里使用的技巧是：

绝对定位容器显示为表格

垂直对齐到显示为表格单元的中心内容

.container { position: absolute; display: table; width: 100%; height: 100%; } .content { display: table-cell; vertical-align: middle; }


      
       
       Peace in the world

就我个人而言，我实际上不同意为此目的使用辅助工具。

#15楼

使用这个：

position: absolute;top: calc(50% - 0.5em);left: calc(50% - 0.5em);line-height: 1em;

您可以更改font-size 。

#16楼

是否要对齐文本/标题之后且都在div内的图像？

参见或运行代码片段。

只要确保在所有元素（div，img，标题等）上都有一个ID或一个类即可。

对我来说，此解决方案可在所有浏览器上使用（对于移动设备，您必须使用@media修改代码）。

h2.h2red { color: red; font-size: 14px; } .mydivclass { margin-top: 30px; display: block; } img.mydesiredclass { margin-right: 10px; display: block; float: left; /* If you want to allign the text with an image on the same row */ width: 100px; heght: 100px; margin-top: -40px /* Change this value to adapt to your page */; }


      
      
 
       
      Text aligned after image inside a div by negative manipulate the img position

#17楼

使用table和table-cell方法可以完成这项工作，特别是因为您也以一些旧的浏览器为目标，所以我为您创建了一个片段，您可以运行它并检查结果：

.wrapper { position: relative; display: table; width: 300px; height: 200px; } .inside { vertical-align: middle; display: table-cell; }


      
       
       Centre me please!!!

#18楼

为了使图像居中放置在容器（可能是徽标）中，除了像这样的一些文字：

基本上，您包装图像

.outer-frame { border: 1px solid red; min-height: 200px; text-align: center; /* Only to align horizontally */ } .wrapper{ line-height: 200px; border: 2px dashed blue; border-radius: 20px; margin: 50px } img { /* height: auto; */ vertical-align: middle; /* Only to align vertically */ }


      
      
        some text

#19楼

这段代码对我很有用。

#20楼

另外，您可以使用Flexbox获得正确的结果：

.parent { align-items: center; /* For vertical align */ background: red; display: flex; height: 250px; /* justify-content: center; <- for horizontal align */ width: 250px; }

#21楼

您可以使用此：

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

#22楼

想像你有

和CSS：

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

#23楼

这适用于现代浏览器（编辑时为2016年），如本

.frame {    height: 25px;    line-height: 25px;    width: 160px;    border: 1px solid #83A7D3;          }.frame img {    background: #3A6F9A;    display:inline-block;    vertical-align: middle;}

给图像一个类或使用继承来定位需要居中的图像非常重要。在此示例中，我们使用.frame img {}以便仅将由div包装的带有.frame类的图像作为目标。

#24楼

背景图片解决方案

我完全删除了图像元素，并使用.frame类将其设置为div的背景

至少在Internet Explorer 8，Firefox 6和Chrome 13上可以正常工作。

我检查了一下，该解决方案无法缩小大于25像素高度的图像。有一个称为background-size的属性可以设置元素的大小，但是CSS 3会与Internet Explorer 7的要求相冲突。

我建议您要么重新设置浏览器优先级并设计最佳的浏览器，要么获得一些服务器端代码来调整图像的大小（如果您想使用此解决方案）。

#25楼

您可以这样做：

演示版

的CSS

.frame {    height: 25px;      /* Equals maximum image height */    line-height: 25px;    width: 160px;    border: 1px solid red;    text-align: center;     margin: 1em 0;    position: relative; /* Changes here... */}img {    background: #3A6F9A;    max-height: 25px;    max-width: 160px;    top: 50%;           /* Here.. */    left: 50%;          /* Here... */    position: absolute; /* And here */}

的JavaScript

$("img").each(function(){    this.style.marginTop = $(this).height() / -2 + "px";})

#26楼

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

关键属性为display: table-cell; 对于.frame 。 Div.frame与此内联显示，因此您需要将其包装在block元素中。

这适用于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");}

#27楼

纯 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

#28楼

使用纯CSS 尝试此解决方案

也许这是HTML的主要问题。当你定义c您没有使用引号lass和image height在你的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标签时，它与top距离为3像素到2像素。现在，我降低line-height ，它正在工作。

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 */    }

在不同的浏览器中， line-height属性的呈现方式有所不同。因此，我们必须定义不同的line-height属性浏览器。

检查此示例： :

查看此示例，了解不同浏览器中的line-height不同：

#29楼

据我所知，唯一（也是最好的跨浏览器）方法是在两个元素上使用height: 100%和vertical-align: middle的inline-block帮助器。

因此，有一个解决方案： :

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

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

Internet Explorer的： :before和expression()解决方案： :

.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',''); t.runtimeStyle.behavior = 'none'; }(this) ); }