当前位置：theitroad>CSS 如何垂直对齐div内的图像

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

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/7273338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 01:29:13 　来源:igfitidea点击:

How to vertically align an image inside a div

cssimagevertical-alignment

提问by Arnaud Le Blanc

How can you align an image inside of a containing div?

如何在 contains 中对齐图像div？

Example

例子

In my example, I need to vertically center the <img>in the <div>with class ="frame":

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

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

.frame's height is fixed and the image's height is unknown. I can add new elements in .frameif that's the only solution. I'm trying to do this on Internet  Explorer 7 and later, WebKit, Gecko.

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

See the jsfiddle here.

请参阅此处的 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>

回答by kizu

The only (and the best cross-browser) way as I know is to use an inline-blockhelper with height: 100%and vertical-align: middleon both elements.

唯一的（和最好的跨浏览器）的方式，因为我知道是使用inline-block佣工height: 100%，并vertical-align: middle在这两个元素。

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

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

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

Or, if you don't want to have an extra element in modern browsers and don't mind using Internet Explorer expressions, you can use a pseudo-element and add it to Internet Explorer using a convenient expression, that runs only once per element, so there won't be any performance issues:

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

The solution with :beforeand expression()for Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/

通过该解决方案:before，并expression()为Internet Explorer：http://jsfiddle.net/kizu/4RPFa/4571/

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

How it works:

这个怎么运作：

  1. When you have two inline-blockelements near each other, you can align each to other's side, so with vertical-align: middleyou'll get something like this:

    Two aligned blocks

  2. When you have a block with fixed height (in px, emor another absolute unit), you can set the height of inner blocks in %.

  3. So, adding one inline-blockwith height: 100%in a block with fixed height would align another inline-blockelement in it (<img/>in your case) vertically near it.

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

    两个对齐的块

  2. 当你有固定的高度（在一个块中px，em或另一个绝对值单元），可以设置在内部块的高度%。

  3. 因此，在具有固定高度的块中添加一个inline-blockwithheight: 100%将使其中的另一个inline-block元素（<img/>在您的情况下）与它垂直对齐。

回答by Tahir Yasin

This might be useful:

这可能有用： 

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

回答by jomo

matejkramny's solution is a good start, but oversized images have a wrong ratio.

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

Here's my fork:

这是我的叉子：

Demo: https://jsbin.com/lidebapomi/edit?html,css,output

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

preview

预览

HTML:

HTML：

<div class="frame">
  <img src="foo"/>
</div>

CSS:

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

回答by Jorge Orpinel

A three-line solution:

三线解决方案：

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

This applies to anything.

这适用于任何事情。

From here.

从这里开始。

回答by Matej

A pureCSS solution:

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

Key stuff

关键的东西

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

回答by Ricardo Zea

For a more modern solution, and if there is no need to support legacy browsers, you can do this:

对于更现代的解决方案，如果不需要支持旧浏览器，您可以这样做：

.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;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Here's a Pen: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

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

回答by Ricardo Zea

This way you can center an image vertically (demo):

通过这种方式，您可以垂直居中图像（演示）：

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

回答by tourniquet

Also, you can use Flexbox to achieve the correct result:

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

回答by BBlackwo

There is a super easysolution with flexbox!

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

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

回答by Yeodave

You could try setting the CSS of PI to display: table-cell; vertical-align: middle;

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

相关推荐

CSS 如何连续选择第一个和最后一个TD？

CSS 如何连续选择第一个和最后一个TD？

CSS 编辑 input type=

CSS 编辑 input type="search" 伪元素按钮 ('x')

CSS Firefox 和 Chrome 中的输入高度差异

CSS Firefox 和 Chrome 中的输入高度差异

CSS Bootstrap 3 btn-group 宽度

CSS Bootstrap 3 btn-group 宽度

相关推荐
最近更新
标签