文本对齐：中心不适用于 div 内的图像答案

【问题标题】：Text-align:center not working on image inside div文本对齐：中心不适用于 div 内的图像
【发布时间】：2014-08-22 12:04:56
【问题描述】：

我的应用中有一个 div，其中包含个人资料信息，例如姓名、帐号和个人资料图片。由于某种原因，即使我尝试了 text-align:center 技巧，个人资料图片也不会居中。这是我的 HTML：

<div id="profile-heading">
    <img alt="6dbepurq" src="http://anymarket.s3.amazonaws.com/users/avatars/000/000/015/medium/6dBEpuRQ.jpeg?1406690559">
    <h2>Tom Maxwell</h2>
    <p id="school">University of California, Berkeley</p>
    <p>User #15</p>
</div>

#profile-heading div 的 CSS 如下所示：

 #profile-heading {
  text-align:center;
  margin-top:50px;
  img{
    border-radius:50%;
    width:150px;
    height:150px;
  }
  h2{
    font-weight:800;
    margin-bottom:5px;
  }
}

有什么想法吗？

【问题讨论】：

似乎在这里工作......对吗？ jsfiddle.net/r711e3ze
它在我的生产站点上不起作用，但是
@karthikr - 应该提到，我正在使用 Sass。
您的代码没有问题。我试了一下HERE，效果很好。

标签： html css

【解决方案1】：

img标签默认是inline-block，你必须在父容器中使用text-align: center来水平对齐img标签。
如果它的display 属性值已更改为block，您应该将样式margin-left: auto; margin-right: auto; 设置为水平居中。

【讨论】：

【解决方案2】：

当我取消嵌套您的样式时，一切都可以使图像居中：

#profile-heading {
    text-align:center;
    margin-top:50px;
}
#profile-heading img {
    border-radius:50%;
    width:150px;
    height:150px;
}
#profile-heading h2 {
    font-weight:800;
    margin-bottom:5px;
}

嵌套仅适用于使用 SASS 或 LESS 的 CSS 预处理器。

另一种使事物居中的方法是使用自动左右边距：margin: 0 auto;希望这会有所帮助！

【讨论】：

是的，我正在使用 SASS，忘记添加了。
那对 SASS 有效。试试position: relative 看看是否可行。

【解决方案3】：

为 img 设置显示属性就可以了：

#profile-heading {
  text-align:center;
  margin-top:50px;
  img{
    border-radius:50%;
    width:150px;
    height:150px;
    display: inline-block; /* added this line */
  }
  h2{
    font-weight:800;
    margin-bottom:5px;
  }
}

【讨论】：

【解决方案4】：

由于<img> 标记不是block level 元素，这意味着text-align 属性将无法按预期工作。你可以做两件事来解决这个问题。

在父元素上应用text-align: center。
使用display: inline-block; 使<img> 标记成为块级元素。

您可以在此处看到 DEMO。

【讨论】：