CODEWITHSUNDEEP
htmlcss
Mike.Whitehead
Mike.Whitehead

Reputation: 818

CSS - positioning images centrally within a container

I'm trying to line up some images within a container and can't seem to move them to make them central. This is how they currently look

enter image description here

I need to sit completely centrally and as is evident they are too far over to the right. I've tried lots of different things but can't get it right. I don't think I'm identifying the correct element.

Here's my code for the section on the photo

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>

Upvotes: 2

Views: 105

Answers (4)

Afrowave
Afrowave

Reputation: 940

Like @yelq said, get rid of the margin-right:100px.

And to make it even more flexible, I would use the display: flex property and use the margin short notation allowing you to change the separation between pictures in only one place.

I would remove the class row from <div class="images row"> since it is not necessary.

In your css, change it to:

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

I would also remove the styling on the img elements and add it to the css, again to allow easier development incase of changes.

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

Upvotes: 0

Omar Vega
Omar Vega

Reputation: 5

This may be help you.

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

Upvotes: 0

Elevate
Elevate

Reputation: 67

Use the padding attribute to manually center the images.

Upvotes: 0

user8201141
user8201141

Reputation:

The issue is caused by the margin-right: 100px attribute in the .images, .four class. If you get rid of that, your images should be centered:

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

If you still want to have that space in between your images, you can add a margin-left field to balance it out:

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

Upvotes: 2

Related Questions