Я осуществляю нумерацию страниц, и она должна быть центрирована. Проблема в том, что ссылки должны отображаться в виде блоков, поэтому они должны быть перемещены. Но тогда text-align: center;
не работает на них. Я мог бы добиться этого, указав отступ для div-обертки слева, но на каждой странице будет разное количество страниц, так что это не сработает. Вот мой код:
.pagination {
text-align: center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
Чтобы понять, чего я хочу:
Ответы:
Удаление
float
s и использованиеinline-block
может исправить ваши проблемы:(удалите строки, начинающиеся с
-
и добавьте строки, начинающиеся с+
.)Показать фрагмент кода
inline-block
работает кросс-браузер, даже на IE6, если элемент изначально является встроенным элементом.Цитата из quirksmode :
это часто может эффективно заменить поплавки:
Из спецификации W3C :
источник
Уже много лет я использую старый трюк, который я узнал в каком-то блоге, извините, я не помню имя, чтобы дать ему кредиты.
В любом случае для центрирования плавающих элементов это должно работать:
Вам нужна такая структура:
хитрость заключается в том, чтобы оставить поплавок влево, чтобы контейнеры меняли ширину в зависимости от содержимого. Это вопрос положения: относительный и оставил 50% и -50% на два контейнера.
Хорошо, что это кросс-браузер и должен работать с IE7 +.
источник
margin: 0 auto;
лучшеfloat: left;
не было необходимости на.main-container
и.fixer-container
.overflow: hidden;
Центрирование поплавков легко . Просто используйте стиль для контейнера:
изменить поля для плавающих элементов:
или
и остальное оставь как есть.
Это лучшее решение для меня, чтобы отображать такие вещи, как меню или нумерация страниц.
Сильные стороны:
кросс-браузер для любых элементов (блоков, элементов списка и т. д.)
простота
Недостатки:
@ arnaud576875 Использование элементов inline-block будет прекрасно работать (кросс-браузер) в этом случае, поскольку разбиение на страницы содержит только якоря (inline), никаких элементов списка или элементов div:
Сильные стороны:
Weknesses:
промежутки между элементами inline-block - это работает так же, как пробел между словами. Это может вызвать некоторые проблемы при расчете ширины контейнера и полей стиля. Ширина зазоров не постоянна, но зависит от браузера (4-5 пикселей). Чтобы избавиться от этих пробелов, я бы добавил код arnaud576875 (не полностью протестированный):
.pagination {межстрочный интервал: -1em; }
.pagination a {межстрочный интервал: .1em; }
он не будет работать в IE6 / 7 для элементов block и list-items
источник
Установите контейнер
width
вpx
и добавить:Ссылка .
источник
Использование Flex
источник
Я думаю, что лучший способ использовать
margin
вместоdisplay
.То есть:
Проверьте результат и код:
http://cssdeck.com/labs/d9d6ydif
источник
источник
IE7 не знает
inline-block
. Вы должны добавить:источник
Добавьте это к вашему стилю
* Если ширина вашего контейнера 50px, укажите 25px, если 10em - 5em.
источник
Вы также можете сделать это,
.pagination
заменив «text-align: center» на две-три строки CSS для left, transform и, в зависимости от обстоятельств, position.источник
шаг 1
создайте два или более div, которые вы хотите, и дайте им определенную ширину, например, 100px для каждого, затем поместите их влево или вправо
шаг 2
затем перетащите эти два div в другой div и дайте ему ширину 200px. к этому div примените маржу auto. бум это работает довольно хорошо. проверьте приведенный выше пример.
источник
Просто добавив
в мое меню CSS
сделал фокусировку тоже
источник