html - CSS - 将图像集中放置在容器中

Question

我试图在容器中排列一些图像，但似乎无法移动它们以使其居中。这是他们目前的样子

我需要完全坐在中央，很明显它们太靠右了。我尝试了很多不同的东西，但无法正确处理。我认为我没有确定正确的元素。

这是我在照片部分的代码

body {
  margin: 0 auto 0 auto;
}

.container {
  margin: auto;
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

section#welcome {
  height: 500px;
  max-width: 100%;
}

section#welcome div.row {
  height: 250px;
  text-align: center;
  position: relative;
}

#welcome h4 {
  color: #000000;
  font-size: 20px;
  padding-top: 50px;
  line-height: 5px;
}

section#welcome p {
  font-size: 10px;
  color: #bdc3c7;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}


/* centering an image within a column */

section#welcome .four {
  position: relative;
  display: inline-block;
  bottom: 50px;
}

.four h3 {
  position: absolute;
  color: #FFF;
  font-size: 20px;
  margin: 0;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
}

section#welcome img {
  display: block;
  margin-bottom: 30px;
}

.images,
.four {
  margin-right: 100px;
}

<section id="welcome">
  <div class="container">
    <div class="row">
      <div class="twelve columns">
        <h4>WELCOME TO FEATURE MEDIA</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque
          facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus
          ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis
          lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
      </div>
    </div>
    <hr class="hrindeximages">
    <div class="images row">
      <div class="four columns">
        <div id="video">
          <h3>VIDEO</h3>
          <img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
        </div>
      </div>
      <div class="four columns">
        <div id="blog">
          <h3>BLOG</h3>
          <img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
        </div>
      </div>
      <div class="four columns">
        <div id="faq">
          <h3>FAQ</h3>
          <img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

问题是由 .images, .four 类中的 margin-right: 100px 属性引起的。如果你摆脱它，你的图像应该居中:

.images, .four {
    margin-right: 100px; // this line causes your images to offset from center
}

如果您仍想在图像之间保留该空间，您可以添加一个 margin-left 字段来平衡它:

.images, .four {
    margin-right: 50px;
    margin-left: 50px;
}