Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Center multiple images (gallery) inside div

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #158570
    Shanakor
    Participant

    Hey there!

    I’ve got a div:

    #content
    {
        position: absolute;
        margin: 0 auto;
        width: 500px;
        height: 500px;
        background-color: white;
    }
    

    now I want to center an image gallery inside it. (Horizontally and vertically)

    How do I do this?

    #158578
    magicspon
    Participant

    center image horizontally:

    img {
        display: block;
        margin: 0 auto;
    }
    

    vertical alignment is a little trickier… you could use the display: table method… or checkout Chris Coyiers pseudo element method – t’is pretty sexy!

    <div class="container">
      <div class="container__inner">
        <img src="spam.jpg" alt="Spam Javelin" />
      </div>
    </div>
    
    .container { display: table; } 
    .container__inner { display: table-cell; vertical-align: middle; }
    

    if you only need to support modern browsers you could use transform.

    enjoy

    #158622
    paulob
    Participant

    HI,

    Assuming the images are still display:inline then text-align:center on the display:table-cell element will center them horizontally.

    #gallery {
        display: table-cell;
        vertical-align: middle;
        text-align:center
    }
    

    Be careful with large widths and large heights. 1500px fixed width is too wide and these days you really should be aiming for a fluid width (by all means set a max-width but allow the page to scale smaller). Also be careful with heights as often you never know the height especially if a user zooms the layout or in a fluid environment content will wrap and the height will need to increase. Generally it is your content that dictates the height and not the other way around. Of course there are always exceptions to the rule :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.