3

I have an image gallery in a website I'm working on. I wanted to center the image gallery, so I added 'text-align:center' to it. It works fine, but what I wanted was to center the entire image gallery on the page and still to left align images inside it. How do I do it?

enter image description here

HTML

<section>
  <article class="img1">
    <a href=""><img src="img/img1.png"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
  <article class="img2">
    <a href=""><img src="img/img2.png"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
  <article class="img3">
    <a href=""><img src="img/img3.png"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
</section>

CSS

section {
  margin-top: 100px;
  /* the gap between top navigation above */
  text-align: center;
}

.img1,
.img2,
.img3 {
  display: inline-block;
  vertical-align: top;
  width: 250px;
  height: auto;
  margin: 0 1%;
  padding: 0;
}

article img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

article dl {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: left;
}

article dt {
  font-size: 0.9em;
  font-weight: 400;
}

article dd {
  margin-left: 0;
  font-size: 0.9em;
  font-weight: 300;
}
Jinsoo Kang
  • 41
  • 4
  • Have you already tried `margin: 0 auto;`? And also: what is `margin-left: 0 1%;`?? – Huelfe Mar 14 '18 at 07:28
  • @Huelfe Thank you for the editing! Yes, I tried it and it still didn't work. 'margin-left: 0 1%;' was typo, so I edited it now! – Jinsoo Kang Mar 14 '18 at 07:32
  • I provided a answer that uses text-align that you already are using. But what browser are you going to support? Could you use flex-box? – Erex Mar 14 '18 at 08:11
  • @Erex Thanks for your answer! But, it's still not working. I posted my current layout. Currently, I'm going to support safari. I've never used flex, but if that fixes this problem, I want to use it. – Jinsoo Kang Mar 14 '18 at 08:29
  • I updated my answer with a flexbox solution. See if it works, and feel welcom to comment below the answer if it is something that brakes when you try to implement it in your solution – Erex Mar 14 '18 at 08:44

5 Answers5

2

Just change text-align: center; to text-align:left; in main section. You will get your desired layout.Your HTML layout will be same.

section {
  margin-top: 100px;
  text-align: left;
}

.img1,
.img2,
.img3 {
  display: inline-block;
  vertical-align: top;
  width: 250px;
  height: auto;
  margin: 0 1%;
  padding: 0;
}

article img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

article dl {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: left;
}

article dt {
  font-size: 0.9em;
  font-weight: 400;
}

article dd {
  margin-left: 0;
  font-size: 0.9em;
  font-weight: 300;
}
preetpal
  • 71
  • 3
1

You have to align the gallery from the parent element, and the images from the gallery element. I do not know what your parent element of the gallery is so I created a div with class image-container. See my solution in plunkr below.

EDIT: Updated the CSS to use flex-box insted of text-align. See the comments in the CSS for more information

.image-container{
        /*This CSS centers the whole gallery*/
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    section {
        background-color: lightgrey; /*Just to better show position of element*/
        margin-top: 100px;
        width: 350px; /*This controls what width you want on the gallery*/
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    section > article {
        background: darkgrey; /*Just to better show position of element*/
        margin-bottom: 10px;
        display: inline-block;
        vertical-align: top;
        width: 48%; /*This controls how many items that would fit in to a row */
        height: auto;
        padding: 0;
    }


    section > article > a {
        width: 100%;
        display: inline-block; /*This is to make article wrapt the content correctly*/
    }


    article img {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }

    article dl {
        display: block;
        width: 100%;
        margin-top: 10px;
        text-align: left;
    }

    article dt {
        font-size: 0.9em;
        font-weight: 400;
    }

    article dd {
        margin-left: 0;
        font-size: 0.9em;
        font-weight: 300;
    }
<div class="image-container">
    <section>
      <article class="img1">
        <a href=""><img src="img/img1.png"></a>
        <dl>
          <a href="#"><dt>Image Title</dt></a>
          <dd>Image Description</dd>
        </dl>
      </article>
      <article class="img2">
        <a href=""><img src="img/img2.png"></a>
        <dl>
          <a href="#"><dt>Image Title</dt></a>
          <dd>Image Description</dd>
        </dl>
      </article>
      <article class="img3">
        <a href=""><img src="img/img3.png"></a>
        <dl>
          <a href="#"><dt>Image Title</dt></a>
          <dd>Image Description</dd>
        </dl>
      </article>
    </section>
</div>
Erex
  • 1,625
  • 1
  • 17
  • 21
0

Try this

Add text-align: left; to this selector .img1, .img2, .img3.

Also

In your work you add wisth: 100%; to the img. please remove this or add max-width: 150px;.

Like this 

article img {
  width: 100%;
  max-width: 150px;
}


section {
    margin-top: 100px; /* the gap between top navigation above */
    text-align: center;
}

.img1,
.img2,
.img3 {
  display: inline-block;
  vertical-align: top;
  width: 250px;
  height: auto;
  margin-left: 0 1%;
  padding: 0;
  text-align: left;
}

article img {
  width: 100%;
  max-width: 150px;
  height: 100%;
  margin: 0;
  padding: 0;
}

article dl {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: left;
}

article dt {
  font-size: 0.9em;
  font-weight: 400;
}

article dd {
  margin-left: 0;
  font-size: 0.9em;
  font-weight: 300;
}
<section>
    <article class="img1"> <a href=""><img src="http://i48.tinypic.com/2d16c2d.jpg"></a>
        <dl>
            <a href="#">
            <dt>Image Title</dt>
            </a>
            <dd>Image Description</dd>
        </dl>
    </article>
    <article class="img2"> <a href=""><img src="http://i48.tinypic.com/2d16c2d.jpg"></a>
        <dl>
            <a href="#">
            <dt>Image Title</dt>
            </a>
            <dd>Image Description</dd>
        </dl>
    </article>
    <article class="img3"> <a href=""><img src="http://i48.tinypic.com/2d16c2d.jpg"></a>
        <dl>
            <a href="#">
            <dt>Image Title</dt>
            </a>
            <dd>Image Description</dd>
        </dl>
    </article>
</section>
Anzil khaN
  • 1,974
  • 1
  • 19
  • 30
0

You will need to set a max-width to the section with margin:auto to center the whole section on the page and then apply text-align:left to align inner inline elements to left...

Also why .img1, .img2, .img3 in your css if same css for all...Add a custom class in your section and use it only once like .gallery article or use same class in all article

Fiddle Link

Stack Snippet

section.gallery {
  width: 80%;
  text-align: left;
  background: grey;
  margin: 100px auto 0;
}

.gallery article {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  height: auto;
  margin-left: 0 1%;
  padding: 0;
  text-align: left;
}

.gallery article img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.gallery article dl {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: left;
}

.gallery article dt {
  font-size: 0.9em;
  font-weight: 400;
}

.gallery article dd {
  margin-left: 0;
  font-size: 0.9em;
  font-weight: 300;
}
<section class="gallery">
  <article class="img1">
    <a href=""><img src="http://via.placeholder.com/150x150"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
  <article class="img2">
    <a href=""><img src="http://via.placeholder.com/150x150"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
  <article class="img3">
    <a href=""><img src="http://via.placeholder.com/150x150"></a>
    <dl>
      <a href="#"><dt>Image Title</dt></a>
      <dd>Image Description</dd>
    </dl>
  </article>
</section>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
  • I tired it, but it's still not working. I used a wrapper to center the entire page(margin: 0 auto; width: 95%;) before and would it affect this situation? – Jinsoo Kang Mar 14 '18 at 08:45
  • @JinsooKang I have used the `width:80%` to the section with `margin:auto` and its working fine...check updated answer... – Bhuwan Mar 14 '18 at 08:50
0

To be more specific check this,

CSS:

section {
  margin:0 auto;
  margin-top: 100px;
  display:block;
}
section article {
  display:inline-block;
  position:relative;
  overflow:hidden;
  text-align:center;
}
article img {
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
  object-fit:cover;
}

Let your HTML as it is, I made some minor changes in image section to make it more clean.you dont need to add img1, img2...

Hope this may help you.

Pankaj Bhandarkar
  • 496
  • 3
  • 20