片段

Question

我试图在div中水平居中图像。但是，我无法做到。我已经尝试将vertical-align设置为中间，将边距设置为auto，0 auto，以及我能想到的每个变体。什么都行不通。以下是当前设置方式的代码：

img {
border: 0;
margin: 0 auto;
}

.intro img {
border-radius: 50%;
vertical-align: middle;
padding: 10px;
}

图像位于介绍div中。你能给出的任何建议都会有所帮助。

Answer 1

如果您想要将图像水平放置并放大;垂直，这应该做的伎俩：

 .intro {
    display: table;
    width: 500px; /* works with any width */
    height: 150px; /* works with any height */
    background: #ccc;
}

.imgcontainer {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

img {
    background: #fff;
    padding: 10px;
    border-radius: 50%;
}

<div class="intro">
   <div class="imgcontainer">
     <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" />
   </div>
</div>

Answer 2

在父position:relative中使用.intro并使用img中所示的代码，它适用于任何width和height

  display:block;
  margin:auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0

片段

＆＃13;

.intro {
  border: dashed red; /* demo */
  display:inline-block; /* demo */
  vertical-align:top; /* demo */
  position: relative
}
.intro img {
  border-radius: 50%;
  vertical-align: middle;
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}
.intro:first-of-type {
  width: 200px;
  height: 200px;
}
.intro:last-of-type {
  width: 400px;
  height: 300px;
}

＆＃13;

<div class="intro">
  <img src="//lorempixel.com/100/100" />
</div>
<div class="intro">
  <img src="//lorempixel.com/100/100" />
</div>

＆＃13;

Answer 3

css样式margin: 0 auto;应该是技巧的横向部分。对于垂直部分，您还需要照顾父母。查看How to vertically align an image inside div了解更多信息。

Answer 4

vertical-align仅适用于表格单元格。尝试使用Flexbox。包含图像的元素应具有CSS属性：

display: flex;
align-items: center;

难以在CSS中居中图像

4 个答案:

片段