Unable to horizontally center a card gallery

SSteven · December 17, 2018

I have written the following code for an image card gallery.

The 1st row contains 1 image card.

The 2nd row contains 2 image cards.

The 3rd row contains 3 image cards.

The image cards are displaying correctly.

However, each row must be horizontally centered, and that's not happening.

How can I fix this?

Thanks.

https://jsfiddle.net/SSteven/zo79psbd/

Here's the CSS:

    <style>
      body
      {
        margin: 25px;
      }

      div.gallery
      {
        margin: 10px auto;
        width: 90%
        border: 1px solid #ccc;		/* light gray */
        float: left;
      }

      div.card
      {
        display: inline-block;
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
                    0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }

      div.desc
      {
        text-align: center;
        padding: 10px 20px;
      }
    </style>

And here's the HTML:

  <body>
    <h2>Image Card Gallery</h2>

    <!-- 1 card per row -->
    <div class="gallery">
      <div class="card">
        <img src="https://loremflickr.com/800/600/paris?random=1" 
             alt="Paris">

        <div class="desc">
          <p>Paris</p>
        </div>
      </div>
    </div>

    <p style="clear: both;">

    <!-- 2 cards per row -->
    <div class="gallery">
      <div class="card">
        <img src="https://loremflickr.com/400/300/rio?random=2" 
             alt="Rio">

        <div class="desc">
          <p>Rio</p>
        </div>
      </div>

      <div class="card">
        <img src="https://loremflickr.com/400/300/rio?random=3" 
             alt="Rio">

        <div class="desc">
          <p>Rio</p>
        </div>
      </div>
    </div>

    <p style="clear: both;">

    <!-- 3 cards per row -->
    <div class="gallery">
      <div class="card">
        <img src="https://loremflickr.com/300/200/london?random=4" 
             alt="London">

        <div class="desc">
          <p>London</p>
        </div>
      </div>

      <div class="card">
        <img src="https://loremflickr.com/300/200/london?random=5" 
             alt="London">

        <div class="desc">
          <p>London</p>
        </div>
      </div>

      <div class="card">
        <img src="https://loremflickr.com/300/200/london?random=6" 
             alt="London">

        <div class="desc">
          <p>London</p>
        </div>
      </div>
    </div>
  </body>

Edited December 17, 2018 by SSteven

Ingolme · December 17, 2018

Remove float: left from the gallery and add text-align: center. You're missing a semi-colon after width: 90%, so it's not being interpreted correctly.

SSteven · December 20, 2018

OK, Thanks for this.

Here's my new CSS for the div.gallery element:

      div.gallery
      {
        margin: 10px auto;
        width: 100%;
        text-align: center;
      }

However, I'm not clear about a few things:

1) Why isn't float: left required in div.gallery? Is that the default for inline-block elements?

2) Why does text-align: center work? Its supposed to work for centering _text_. Here, the content of the gallery isn't text; its <div> elements.

Thanks.

dsonesuk · December 20, 2018

Display: inline-block makes the elements act as text would and aligns as text would and is newer method to using float to align elements side by side.

Sign In

Unable to horizontally center a card gallery

Recommended Posts

SSteven

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

SSteven

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity