Jump to content
SSteven

Unable to horizontally center a card gallery

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×