html - 在 CSS 中居中图片

Question

需要帮助在 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>

我还为第二张图片创建了一个单独的 div ID。这是其中一张图片的 CSS。两个图像具有相似的 css。

#centerLeftAboutPic {
  float: right;
  width: 320px;
  padding-left: 30px;
  position: relative;
}

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

Answer 1

您可以在您的 CSS 中使用以下内容

text-align:center 

片段

#centerLeftAboutPic {
      text-align:center;
       padding-left:30px;
       position: relative;
       border:solid black;
}
img{
  width:50px;
  height:50px;
  margin-left:70px;
}

<div id="centerLeftAboutPic">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
 <div>
</div>