Html 在CSS中居中图片

需要帮助在CSS中集中这些图像吗

我一直在尝试使用div id标记将它们居中

<div id="centerLeftAboutPic">
  <div class="single-about-detail clearfix">
    <div class="about-img">
      <img src="img/AttyRLev.jpg" alt="">
    </div>

    <div class="about-details">
      <div class="pentagon-text">
        <h1>R</h1>
      </div>

      <h3>Atty Rob Lev</h3>
      <p>Click here to learn more about robert lev</p>
    </div>
  </div>
</div>

---

我是网络开发新手，所以我仍然对定位感到困惑。谢谢。

如果要将图像相对于其容器居中，则只需将其添加到CSS中即可

#centerLeftAboutPic img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

但是，它只会将它放在您在

#centerLeftAboutPic

中提供的320px容器的中心。如果将该属性调整为

width:100%它将在页面上居中显示

给你一把小提琴。在本例中，我将宽度设置为100%，您将了解我的意思：

如果要将整个
#centerLeftAboutPic
div居中，需要将边距放在div上，并删除float:right属性。这里有一把小提琴：

您可以在css中使用下面的

text-align:center 

片段


#centerLeftAboutPic{
文本对齐：居中；
左侧填充：30px；
位置：相对位置；
边框：纯黑；
}
img{
宽度：50px；
高度：50px；
左边距：70像素；
}

效果很好，但我希望两张图片之间有更大的空白。我试着在左边加一个边距：10px；但是什么也没有发生img选择器左侧的边距…请参阅我编辑的答案…注意：如果您对div使用固定宽度，并对图像应用边距…这将使图像向右移动，部分边距将隐藏在div后面…这是由于溢出隐藏属性…如果您不对div应用宽度，DIV容器将调整到图像边距并在中间居中所有图像……
#centerLeftAboutPic {
  width: 320px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

text-align:center