Центрування щось у HTML/CSS

Я думаю, що у мене може виникнути проблема, не впевнена, що це проблема, тому що я так довго дивився на це, навіть не знаю, чи є вона центром чи ні.

http://jamessuske.com/thornwood/gallery.php

Що я намагаюся зробити - це зосередити всю галерею, мені це виглядає дещо вправо. Якщо хтось може мені допомогти зрозуміти це, це буде чудово. Дякую заздалегідь.

CSS CODE

.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;
}
0
додано
Перегляди: 13
джерело
ro ru fr es pt de zh hi bn ar kk tr
Який браузер дає вам проблеми? Виглядає чудово в хромі
додано Автор Madara Uchiha, джерело
Хтось - не зрозумів, про що ти говориш. Я думав, що ви мали на увазі велику коробку посередині, а не буквальну галерею зображень в цій коробці. @fixlr правильно - вам потрібно видалити повзунок у списку. Ви повинні були роз'яснити.
додано Автор Nightfirecat, джерело
ні, :) це центр
додано Автор Joseph Marikle, джерело

4 Відповіді

Схоже, що вам потрібно просто видалити ліву панель на елементі у вашому .gallery:

.gallery ul { padding-left: 0px; }

Залежно від того, який веб-браузер ви використовуєте, в списках зазвичай використовується подушка за замовчуванням.

3
додано
джерело

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/

1
додано
джерело
це не . Гарне оновлення, хоча.
додано Автор Bojangles, джерело
Отже, друге речення у моєму коментарі. Я вже зробив знімок екрана, тому я вирішив опублікувати його так :-P
додано Автор Bojangles, джерело
Я робив. Він має найменшу репутацію кожного і виклав правильну відповідь. Додайте +1 до рекомендацій щодо цих інструментів.
додано Автор Bojangles, джерело
Просто зрозумів, що він говорив про вміст всередині сайту, а не про сам сайт. Оновлено за допомогою простого рішення для виправлення цієї помилки.
додано Автор nheinrich, джерело
:) Проголосував fixlr, він зрозумів, що відбувається.
додано Автор nheinrich, джерело

Це не центром. (Зараз три людини стверджують, що це центр, але я не знаю, що вони дивляться ...)

Ви використовуєте список для зображень, а за промовчанням - літеру.

Ви використовуєте заповнення в посиланнях, щоб отримати пробіл між ними, але ви лише заповнюєте ліворуч та зверху сторони, так що також буде додано додатковий пробіл зліва.

Встановіть прапорець наліво до нуля у списку:

.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;
}
0
додано
джерело
дуже дякую. виглядає ідеально!
додано Автор user979331, джерело

Ви маєте рацію, це не центризоване.

Я думаю, але я не впевнений, що це може бути проблемою підкладки, ви встановлюєте прокрутку залишено, але не однаково правильно на елементах пари в контейнері.

все залишено підкладкою до 0 пікселів (або використовуйте рівну підкладку вліво та вправо подібно до цього - padding: 5px 5px; або кожне зображення може мати 0 пробілів та однакові поля: 5px 5px;

0
додано
джерело