Jump to content

Unable to horizontally center a card gallery


SSteven
 Share

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
Link to comment
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.

Link to comment
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
 Share

×
×
  • Create New...