- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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?
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
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 :)