I know this question has been asked many times before, but none of the answers have worked for me. I am coding in HTML5 and CSS 3.0. I am trying to center a div tag in a page, which contains three thumbnails that link to other pictures. I want the pictures to sit next to each other, with a margin of 0 (so they'll touch each other). Here is the html code I have:
<div id="main">
<h1>hello</h1>
<div id="gallery">
<a class="trigger" href="images/fulls/01.jpg">
<img class="thumb" src="images/thumbs/01.jpg">
</a>
<a class="trigger" href="images/fulls/02.jpg">
<img class="thumb" src="images/thumbs/02.jpg">
</a>
<a class="trigger" href="images/fulls/03.jpg">
<img class="thumb" src="images/thumbs/03.jpg">
</a>
</div>
</div>
The CSS:
body {
font-family: arial;
background: darkgray;
color:white;
text-shadow:1px 1px 3px black;
text-align: center;
}
#gallery {
text-align: center;
width: 462px;
}
.trigger {
position: relative;
display: block;
float: left;
}
This results in the title "hello" being centered, and the three thumbnails stuck to the very left. They have no distance between them, and aligned in a row as I expected, but I cannot get them to center.
You need to remove float:left from your images and use display: inline-block; then add margin: 0 auto; to your #gallery