Центрирование чего-то в HTML/CSS
Я думаю, что у меня может быть проблема, не уверен, что это проблема, потому что я смотрел на нее долгое время, я даже не знаю, сосредоточено ее или нет.
http://jamessuske.com/thornwood/gallery.php
То, что я пытаюсь сделать, - это центрировать всю галерею, для меня это похоже на ее немного справа. Если кто-нибудь может помочь мне понять это, это будет здорово. Заранее спасибо.
CSS-код
.contentTextGallery{
padding:20px 0 0 0;
width:866px;
font-size:16px;
float:left;
}
.gallery{
width:912px;
margin-top:6px;
}
.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;
}
Update: Oh, I see what you are trying to fix now, the stuff inside the container:
Все что тебе нужно это
.gallery ul {
padding: 0;
}
Original:
Одна вещь, которую вы, возможно, захотите сделать, это подобрать инструмент, такой как XScope: http://iconfactory.com/software/xscope . Это приложение, которое имеет инструменты для проектирования (линейки, направляющие, рамки размера браузера и т. Д.). Правитель может помочь вам в этом, потому что он измеряет пиксели на экране. Вы можете быстро измерить, сколько пикселей расположено на каждой стороне вашего макета.
Also here is something similar but a little less elegant: http://www.arulerforwindows.com/
Это не сосредоточено. (Сейчас три человека утверждают, что они сосредоточены, но я не знаю, на что они смотрят ...)
Вы используете список для изображений, и по умолчанию у него есть отступ слева.
Вы используете прописку в ссылках, чтобы получить пространство между ними, но вы только дополняете слева и сверху, так что также добавьте лишнее пространство слева.
Установите левое дополнение в ноль в списке:
.gallery ul{
list-style-type:none;
text-align:center;
padding-left: 0;
}
Сделайте левое и правое дополнение в ссылках более ровным:
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 2px 0 3px;
}
Вы правы, он не центрирован.
Я думаю, но не уверен, что это может быть проблема с добавлением, вы устанавливаете остатки слева, но неравномерно на пару элементов в контейнере.
все левое заполнение до 0px (или используйте равное дополнение слева и справа например: padding: 5px 5px; или каждое изображение может иметь 0 дополнений и равных полей: 5px 5px;
