Центрирование списка с помощью HTML и CSS

#html #css

#HTML #css

Вопрос:

Надеюсь, кто-нибудь сможет мне помочь, я пытаюсь центрировать свою галерею (элементы списка), и я чувствую, что перепробовал все, и ничего не работает, если бы кто-нибудь мог указать мне правильное направление, это было бы очень ценно. http://www.jamessuske.com/thornwood/gallery.php

HTML-КОД

 <div class="gallery">
<ul>
<li><a href="pics/1.jpg" rel="lightbox" title="Thornwood Fine Homes"><img src="pics/icon1.jpg" border="0" /></a></li>
<li><a href="pics/2.jpg" rel="lightbox" title="Thornwood Fine Homes"><img src="pics/icon2.jpg" border="0" /></a></li>
<li><a href="pics/3.jpg" rel="lightbox" title="Thornwood Fine Homes"><img src="pics/icon3.jpg" border="0" /></a></li>
<li><a href="pics/4.jpg" rel="lightbox" title="Thornwood Fine Homes"><img src="pics/icon4.jpg" border="0" /></a></li>
<li><a href="pics/5.jpg" rel="lightbox" title="Thornwood Fine Homes"><img src="pics/icon5.jpg" border="0" /></a></li>
<li><a href="pics/6.jpg" rel="lightbox" title="Thornwood Fine Homes"><img src="pics/icon6.jpg" border="0" /></a></li>
<li><a href="pics/7.jpg" rel="lightbox" title="Thornwood Fine Homes"><img src="pics/icon7.jpg" border="0" /></a></li>
<li><a href="pics/8.jpg" rel="lightbox" title="Thornwood Fine Homes"><img src="pics/icon8.jpg" border="0" /></a></li>

КОД CSS

 .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;
 }

1. Что это?: list-style-type:none;.gallery li{

2. Вы пытаетесь центрировать свой список в div галереи? Или центрировать каталог галереи в его родительском контейнере? Или центрировать элементы списка внутри списка? Неясно, чего вы пытаетесь достичь.

Ответ №1:

Центрирование дочерних элементов можно выполнить следующим образом:

Применить text-align:center к родительскому элементу
Удалите все float s из дочерних элементов и примените или убедитесь, что display inline inline-block

Итак, что-то вроде этого:

 .gallery ul {
    text-align:center;
}
.gallery li {
    float:none; /* or just make sure you don't float them */
    display:inline-block;
}

Должно сработать для вас, если ваша цель — центрировать изображения, но располагать их в строках.

Ответ №2:

Не могу сделать это с плавающей запятой слева: Пример 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;
}

1. Если вы считаете, что промежутки между изображениями слишком велики, попробуйте удалить пробелы (включая разрывы строк и табуляции) между </li> и <li>, а также между <img /> и <a> и <li>. Так что сделайте <li> <a> <img /> </a> </li> <li> .. </li> в этот <li><a></img></a></li><li> .. </li>

Ответ №3:

У вас по-прежнему будут серьезные проблемы со всем этим, потому что у вас нет doctype и вы находитесь в «режиме причуд». Добавьте это в самую первую строку : <!DOCTYPE html> .

Однако при добавлении doctype это может изменить весь макет. Но это цена неправильного начала.