Question

我试图在容器中排列一些图像并且似乎无法移动它们使它们成为中心。这就是他们目前的样子

我需要完全坐在中央位置，很明显，他们太过分了。我尝试过很多不同的东西，但不能做对。我不认为我能找到正确的元素。

这是我的照片部分代码

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

.images, .four

如果您仍希望在图片之间留出空格，可以添加.images, .four { margin-right: 100px; // this line causes your images to offset from center }字段以平衡图片：

margin-left

Answer 2

使用padding属性手动居中图像。

Answer 3

这可能对你有帮助。

.images { text-align: center; width: 100%; }

Answer 4

像@yelq说的那样，摆脱margin-right:100px。

为了使其更加灵活，我会使用display: flex属性并使用margin短符号，只允许您在一个地方更改图片之间的分隔。

我会从row删除课程<div class="images row">，因为没有必要。

在您的CSS中，将其更改为：

.images, .four {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 50px;
    /*margin-right: 100px;*/
}

我还会删除img元素上的样式并将其添加到css中，以便更容易进行更改。

.images img {
    width:300px;
    height:150px;
}

CSS - 在容器中集中定位图像

4 个答案: