Centering a List with HTML and CSS
Question
Hope someone can help me, I am trying to center my gallery (list items) and I feel I have tried everything and nothing is working, if someone could point me in the right direction it would much appreciated. http://www.jamessuske.com/thornwood/gallery.php
HTML CODE
<div class="gallery">
<ul>
<li><a href="pics/1.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon1.jpg" border="0" /></a></li>
<li><a href="pics/2.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon2.jpg" border="0" /></a></li>
<li><a href="pics/3.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon3.jpg" border="0" /></a></li>
<li><a href="pics/4.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon4.jpg" border="0" /></a></li>
<li><a href="pics/5.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon5.jpg" border="0" /></a></li>
<li><a href="pics/6.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon6.jpg" border="0" /></a></li>
<li><a href="pics/7.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon7.jpg" border="0" /></a></li>
<li><a href="pics/8.jpg" rel="lightbox[gallery]" title="Thornwood Fine Homes"><img src="pics/icon8.jpg" border="0" /></a></li>
CSS CODE
.gallery{
width:965px;
float:right;
}
.gallery ul{
list-style-type:none;.gallery li{
float:left;
text-align:center;
}
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 0 0 5px;
}
3 answers
solution1
1 2011-10-26 22:00:15
Centering child elements can be done like this:
- Apply
text-align:centerto the parent element - Remove any
floats from children and apply or ensure that thedisplayisinlineorinline-block
So something like this:
.gallery ul {
text-align:center;
}
.gallery li {
float:none; /* or just make sure you don't float them */
display:inline-block;
}
Should work for you, if your goal is to center the images but have them in rows.
solution2
0 2011-10-26 22:02:30
Can't do it with float left: Example http://jsfiddle.net/HerrSerker/KvPPe/
.gallery{
width:965px;
}
.gallery ul{
list-style-type:none;
text-align:center
}
.gallery li{
display: inline-block;
}
* html .gallery li { /* IE6 */
display: inline;
}
*:first-child + html .gallery li { /* IE7 */
display: inline;
}
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 0 0 5px;
}
solution3
0 2011-10-26 22:46:59
You are going to continue to have significant problems with all this because you don't have a doctype and you are in 'quirks mode'. Add this to your very first line: <!DOCTYPE html> .
However, by adding the doctype, this may change the whole layout. But that's the cost of not starting off properly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.