Как центрировать элементы float?
я реализую разбиение на страницы, и оно должно быть центрировано. Проблема в том, что ссылки должны отображаться как блок, поэтому они должны быть плавающими. Но потом ... --2--> не работает на них. Я мог бы достичь этого, дав обертке div заполнение слева, но каждая страница будет иметь разное количество страниц, так что это не сработает. Вот мой код:
css lang-css prettyprint-override">.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 -->
чтобы получить представление, что я хочу:
11 ответов
удаление float
s и использование inline-block
может исправить ваши проблемы:
.pagination a {
- display: block;
+ display: inline-block;
width: 30px;
height: 30px;
- float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
(удалить строки, начинающиеся с -
и добавьте строки, начинающиеся с +
.)
.pagination {
text-align: center;
}
.pagination a {
+ display: inline-block;
width: 30px;
height: 30px;
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 -->
inline-block
работает кросс-браузер, даже на IE6, пока элемент изначально является встроенным элементом.
цитата quirksmode:
встроенный блок помещается inline (т. е. на одной строке смежный контент), но он ведет себя как блок.
это часто может эффективно заменить поплавки:
реальное использование этого значения-когда вы хотите дать встроенному элементу ширину. В некоторых случаях некоторые браузеры не разрешают ширину на реальном встроенном элементе, но если вы переключаетесь на отображение: inline-block, вам разрешено устанавливать ширину."( http://www.quirksmode.org/css/display.html#inlineblock ).
от W3C spec:
[inline-block] вызывает элемент для создания контейнера блока встроенного уровня. Внутренняя часть встроенного блока форматируется как блок, а сам элемент форматируется как атомарный встроенный блок.
Так как много лет я использую старый трюк, который я узнал в каком-то блоге, Мне жаль, что я не помню имени, чтобы дать ему кредиты.
в любом случае, чтобы центрировать плавающие элементы, это должно работать:
вам нужна такая структура:
.main-container {
float: left;
position: relative;
left: 50%;
}
.fixer-container {
float: left;
position: relative;
left: -50%;
}
<div class="main-container">
<div class="fixer-container">
<ul class="list-of-floating-elements">
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
</ul>
</div>
</div>
трюк дает поплавок влево, чтобы контейнеры меняли ширину в зависимости от содержимого. Чем является вопрос позиции: относительный и левый 50% и -50% на двух стеклотара.
хорошо, что это кросс-браузер и работать с IE7+.
центрирование поплавков легко. Просто используйте стиль для контейнера:
.pagination{ display: table; margin: 0 auto; }
изменение поля для плавающих элементов:
.pagination a{ margin: 0 2px; }
или
.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }
а остальное оставьте как есть.
Это лучшее решение для меня, чтобы отобразить вещи, как меню и разбивка на страницы.
сильные стороны:
кросс-браузер для любых элементов (блоков, элементов списка и т. д.)
простота
недостатки:
- это работает только тогда, когда все плавающие элементы находятся в одной строке (обычно хорошо для меню, но не для галереи).
@arnaud576875 использование встроенный блок элементы будут отлично работать (кросс-браузер) в этом случае, поскольку разбиение на страницы содержит только якоря (встроенные), без элементов списка или divs:
сильные стороны:
- работы для multiline предметы.
Weknesses:
-
зазоры между элементами встроенного блока - это работает так же, как пространство между словами. Это может вызвать некоторые проблемы с вычислением ширины контейнера и полей стиля. Ширина зазоров не является постоянной, но она специфична для браузера (4-5px). Чтобы избавиться от этих пробелов, я бы добавил в код arnaud576875 (не полностью протестирован):
.разбиение на страницы{ Word-spacing: - 1em;}
.пагинация в{ интервал между словами: .1эм; }
он не будет работать в IE6 / 7 на элементах блока и списка
Использование Flex
.pagination {
text-align: center;
display:flex;
justify-content: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 -->
Я думаю, что лучший способ-использовать margin
вместо display
.
то есть:
.pagination a {
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
background: url(/images/structure/pagination-button.png);
}
проверьте результат и код:
добавьте это к вам styling
position:relative;
float: left;
left: calc(50% - *half your container length here);
*Если ваша ширина контейнера 50px положила 25px, то если 10em положило 5em.
<!DOCTYPE html>
<html>
<head>
<title>float object center</title>
<style type="text/css">
#warp{
width:500px;
margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
width: 120px;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="warp">
<div class="ser">
<img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
<div class="ser">
<img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
</div>
</body>
</html>
Шаг 1
создайте два или более div, которые вы хотите, и дайте им определенную ширину, такую как 100px для каждого, затем плавайте влево или вправо
Шаг 2
затем деформируйте эти два div в другом div и дайте ему ширину 200px. к этому div применить маржу авто. бум он работает довольно хорошо. проверьте приведенный выше пример.
просто добавив
left:15%;
в мое меню css
#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}
сделал центрирующий трюк тоже