图片居中 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。

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

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

这里有一个 fiddle 给你。我在示例中将宽度设置为 100%，尝试一下，您就会明白我的意思：https://jsfiddle.net/v5k8rjy2/2/

如果你想让整个 #centerLeftAboutPic div 居中，你需要将边距放在 div 本身并移除浮动：对属性 .这是其中的 fiddle：https://jsfiddle.net/v5k8rjy2/5/

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

Answer 2

您可以在 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>

图片居中 CSS

Centering Pictures in CSS

html

css

css-position