文本對齊：居中不適用於div中的圖像

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標簽默認情況下為inline-block，並且必須在父容器中使用text-align: center來水平對齊img標簽。
如果它的display屬性值已更改為block ，則應設置樣式margin-left: auto; margin-right: auto; 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屬性將無法正常工作。 您可以做兩件事來解決此問題。

1. 要么應用text-align: center在父元素上。
2. 使用display: inline-block;使<img>標簽成為一個塊級元素display: inline-block; 。

您可以在此處看到一個DEMO 。