Question

我的应用中有一个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;
  }
}

有什么想法吗？

Answer 1

默认情况下，

img标记为内嵌块，您必须使用父容器中的text-align: center水平对齐img标记。
如果display属性值已更改为block，则应将样式margin-left: auto; margin-right: auto;设置为水平居中。

Answer 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;希望这会有所帮助！

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

Answer 4

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

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

您可以在此处看到 DEMO 。

文本对齐：中心不在div内的图像上工作

4 个答案: