问题

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

示例

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

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

.frame 's height is fixed and image'的身高未知 . 我可以在 .frame 中添加新元素，如果's the only solution. I'm试图在IE≥7，Webkit，Gecko上执行此操作 .

看jsfiddle here

.frame {
    height: 25px;      /* equals max 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>

30 回答

你可以尝试下面的代码

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

回复于 2024-05-08T12:18:54+08:00

你可以这样做：

演示

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* equals max 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";
})

回复于 2024-05-08T12:18:54+08:00

460

这可能很有用：

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/

回复于 2024-05-08T12:18:54+08:00

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

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

回复于 2024-05-08T12:18:54+08:00

matejkramny's solution is a good start, but oversized images have a wrong ratio.
这是我的分叉：

演示：https://jsbin.com/lidebapomi/edit?html,css,output

preview

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

回复于 2024-05-08T12:18:54+08:00

最好的解决方案是

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

回复于 2024-05-08T12:18:54+08:00

此外，您可以使用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>

回复于 2024-05-08T12:18:54+08:00

1882

Background image solution 我一起删除了图像元素并将其设置为div的背景，类为 .frame

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

这至少适用于IE8，FF6和Chrome13

我检查过，这个解决方案无法缩小大于25px高度的图像 . 有一个名为 background-size 的属性设置了元素的大小，但它是CSS3，它会与IE7要求冲突 .

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

回复于 2024-05-08T12:18:54+08:00

我的解决方案：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;
}

回复于 2024-05-08T12:18:54+08:00

10

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

回复于 2024-05-08T12:18:54+08:00

尝试使用纯css的这个解决方案http://jsfiddle.net/sandeep/4RPFa/72/可能是你的html的主要问题 . 在html中定义c lass ＆ image height 时，不要使用引号 .

CSS：

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

EDIT :

当我使用 img 标签时，它会从 top 离开 3px to 2px 空间 . 现在我减少 line-height ＆它的工作 . CSS：

.frame {
        height: 25px;      /* equals max image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height:22px;
        *:first-child+html line-height:24px; /* for IE7 */
    }

    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 属性在不同的浏览器中有不同的 render . 所以;我们必须定义不同的 line-height 属性浏览器

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

在不同的浏览器中查看关于 line-height 不同的示例input height differences in Firefox and Chrome

回复于 2024-05-08T12:18:54+08:00

不确定IE，但在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;
}

回复于 2024-05-08T12:18:54+08:00

16
我一直在玩填充物用于中心对齐 . 您需要定义顶级外部容器大小，但内部容器应调整大小，并且可以将填充设置为不同的百分比值 .

jsfiddle
```
<div class='container'>
  <img src='image.jpg' />
</div>

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

img {
  width: 100%;
}
```
回复于 2024-05-08T12:18:54+08:00

402

使用 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>

回复于 2024-05-08T12:18:54+08:00

想要对齐文本/ Headers 之后的图像并且两者都在div中吗？

请参阅JSfiddle或运行代码段 .

请确保在所有元素（div，img，title等）上都有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">


<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 alligned after image inside a div by negative manipulate the img postion</h2>
</div>

回复于 2024-05-08T12:18:54+08:00

这个怎么样？

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

你可以改变 font-size

回复于 2024-05-08T12:18:54+08:00

一个纯粹的CSS解决方案：

http://jsfiddle.net/3MVPM/

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

回复于 2024-05-08T12:18:54+08:00

97
这适用于现代浏览器（2016年编辑时），如demo on 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 {} ，这样只有一个由 .frame 类的div包装的图像才会被定位 .
回复于 2024-05-08T12:18:54+08:00

用于将图像集中在容器内（可能是徽标），除了这样的一些文本：

基本上你包装图像

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; //only for align horizontally
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
//height: auto;
  vertical-align: middle;
}

<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

回复于 2024-05-08T12:18:54+08:00

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* equals max 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显示为与此内联，因此您需要将其包装在块元素中 .

这适用于FF，Opera，Chrome，Safari和IE8 .

UPDATE

对于IE7，我们需要添加一个css表达式：

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

回复于 2024-05-08T12:18:54+08:00

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

所以有一个解决方案：http://jsfiddle.net/kizu/4RPFa/4570/

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

<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

或者，如果您不想在现代浏览器中有额外的元素并且不介意使用IE表达式，您可以使用伪元素并使用方便的表达式将其添加到IE，每个元素只运行一次，所以没有任何性能问题：

用于IE的 :before 和 expression() 的解决方案：http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* equals max 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','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

这个怎么运作：

当你有两个 inline-block 元素彼此靠近时，你可以将每个元素对齐到另一边，所以使用 vertical-align: middle 你会得到这样的东西：

Two aligned blocks

当具有固定高度的块（在 px ， em 或其他绝对单位中）时，可以在 % 中设置内部块的高度 .
因此，在具有固定高度的块中添加 inline-block 和 height: 100% 将在其中对齐另一个 inline-block 元素（在您的情况下为 <img/> ）垂直靠近它 .

回复于 2024-05-08T12:18:54+08:00

0
super easy 解决方案 super easy
```
.frame {
    display: flex;
    align-items: center;
}
```
回复于 2024-05-08T12:18:54+08:00

我在这里发布的旧JSFiddle链接不再工作，这可能是downvote的原因 . 只是为了这是一个有效的答案我仍然想再次发布jQuery解决方案 . 这适用于应用了 v_align 类的每个元素 . 它将在父级中心垂直，并且在重新调整窗口大小时将重新计算 .

Link to the JSFiddle

$(document).ready(function() {
  // define the class that vertial aligns stuff
  var objects = '.v_align';
  // initial setup
  verticalAlign(objects);

  // register resize event listener
  $(window).resize(function() {
    verticalAlign(objects);
  });
});

function verticalAlign(selector) {
  $(selector).each(function(val) {
    var parent_height = $(this).parent().height();
    var dif = parent_height - $(this).height()
    // should only work if the parent is larger than the element
    var margin_top = dif > 0 ? dif/2 : 0;
    $(this).css("margin-top", margin_top + "px");
  });
}

回复于 2024-05-08T12:18:54+08:00

12

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

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

编辑：现在它不再集中在Opera ...

回复于 2024-05-08T12:18:54+08:00

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

div{
  height:150px; //IE7fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom:0.25em;
}

回复于 2024-05-08T12:18:54+08:00

127
对我有用的简单方法：
```
img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}
```
非常适合谷歌浏览器 . 在不同的浏览器上尝试这个 .
回复于 2024-05-08T12:18:54+08:00
1
解决方案使用表和表格单元格

有时它应该通过显示为table / table-cell来解决 . 例如快速 Headers 屏幕 . 这也是W3推荐的方式 . 我建议您从W3C.org查看名为Centering things的链接

这里使用的提示是：
- 绝对定位容器显示为表格
- 垂直对齐到显示为表格单元格的中心内容
```
.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>
```
就个人而言，我实际上不同意为此目的使用助手
回复于 2024-05-08T12:18:54+08:00
175
3线解决方案：
```
position: relative;
top: 50%;
transform: translateY(-50%);
```
这适用于任何事情 .

来自here .
回复于 2024-05-08T12:18:54+08:00

对于那些登陆这篇文章并且对更现代的解决方案感兴趣并且不需要支持旧版浏览器的人，您可以这样做：

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: 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;
}

<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

这是一支笔：http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

回复于 2024-05-08T12:18:54+08:00

你可以用这个：

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

}

回复于 2024-05-08T12:18:54+08:00

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

问题

示例

30 回答

演示

CSS

javascript

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

相关问题