HomeQuestionBlogAboutMessageToolbox
English

如何在div中垂直对齐图像

十三JimHarry2020-03-13

如何在容器中对齐图像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>

Eva西里2020/03/13 17:30:12

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

参见JSfiddle或运行代码片段。

只要确保所有元素（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 */;
}
<div class="mydivclass">
    <br />
    <img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
    <h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>
</div>

神奇启人2020/03/13 17:30:12

使用这个：

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

而且你可以有所不同font-size。

村村伽罗十三2020/03/13 17:30:12

最好的解决方案是

.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;
}
LEYJim2020/03/13 17:30:11

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

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

.inside {
  vertical-align: middle;
  display: table-cell;
}
<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div>

村村西里Green2020/03/13 17:30:11

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

<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>
番长古一GO2020/03/13 17:30:11

您可以使用此：

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }
神奇Mandy2020/03/13 17:30:11

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

在此处输入图片说明

基本上，您包装图像

.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 */
}
<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

GreenStafan2020/03/13 17:30:11

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

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

这里使用的技巧是：

  • 绝对定位容器显示为表格
  • 垂直对齐到显示为表格单元的中心内容

.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
}
<div class="container">
  <div class="content">
    <h1 style="text-align:center">Peace in the world</h1>
 </div>
</div>

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

2020/03/13 17:30:11

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

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

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

理查德Stafan达蒙2020/03/13 17:30:11

这适用于现代浏览器（编辑时为2016），如本演示中的Codepen所示

.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类别为div包裹的图像的.frame目标。

乐Mandy2020/03/13 17:30:11

如果您可以使用像素大小的边距，只需将添加font-size: 1px;到即可.frame。但是请记住，现在在.frame1em = 1px上，这意味着您也需要以像素为单位设置边距。

http://jsfiddle.net/feeela/4RPFa/96/

现在它不再在Opera中居中...

宝儿猿2020/03/13 17:30:11

我的解决方案：http : //jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.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;
}
Pro理查德LEY2020/03/13 17:30:11

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

也许这是HTML的主要问题。在HTML中定义c lass＆时，您不会使用引号image height。

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像素top。现在我减少了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属性浏览器。

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

查看以下示例，了解line-height不同浏览器中的不同之处：Firefox和Chrome中输入高度的差异

西里宝儿2020/03/13 17:30:11

我不知道有关Internet Explorer，但Firefox和Chrome下，如果你有一个img在一个div容器，下面的CSS内容应该工作。至少对我来说效果很好：

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

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}
小小2020/03/13 17:30:11

想象你有

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

和CSS：

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}
小小LDavaid2020/03/13 17:30:11

背景图片解决方案

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

http://jsfiddle.net/URVKa/2/

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

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

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

小卤蛋Tom2020/03/13 17:30:11

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

关键属性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");
}
Near卡卡西2020/03/13 17:30:11

您可以这样做：

演示版

http://jsfiddle.net/DZ8vW/1

的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";
})
猴子Tom2020/03/13 17:30:11

您可以尝试以下代码：

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

木禾2020/03/13 17:30:11

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

.parent {
  align-items: center; /* For vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}
<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

猪猪Sam2020/03/13 17:30:11

您可以尝试将PI的CSS设置为 display: table-cell; vertical-align: middle;

GO阿飞2020/03/13 17:30:11

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

.frame {
    display: flex;
    align-items: center;
}
乐蛋蛋2020/03/13 17:30:11

三行解决方案：

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

这适用于任何东西。

从这里。

2020/03/13 17:30:11

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

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}
LEY小卤蛋2020/03/13 17:30:10

一个纯 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;
}
<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>

关键的东西

// 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
乐古一2020/03/13 17:30:10

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;
}
古一蓝染大人别太浪2020/03/13 17:30:10

这可能有用： 

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

参考：http : //www.student.oulu.fi/~laurirai/www/css/middle/

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标
5 Answer
如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)
25 Answer
MAC终端删除代理有效命令
1 Answer
vue动态路由跳转同一地址不刷新页面
0 Answer
NUXT引入tailwindcss报错Error: Expected an opening square bracket.
1 Answer

LINKS

QuestionBlogMessageToolbox