在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 

段

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您想将图像相对于其容器居中，那么您需要做的就是将其添加到其CSS中。

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

然而，它只会将其放在您在#centerLeftAboutPic中提供的320px容器中。如果您将该属性调整为width: 100%;，则会将其置于页面中心。

这里是你的小提琴。我在示例中将宽度设置为100％，玩它并且你会看到我的意思：https://jsfiddle.net/v5k8rjy2/2/

如果你想将整个#centerLeftAboutPic div居中，你需要将div上的边距放在它自己的位置并删除float：right属性。这是一个小提琴：https://jsfiddle.net/v5k8rjy2/5/

#centerLeftAboutPic {
  width: 320px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
}