Як центрувати плаваючі елементи?


354

Я реалізую пагинацію, і її потрібно зосередити. Проблема полягає в тому, що посилання потрібно відображати як блок, тому їх потрібно плавати. Але потім, text-align: center;не працює на них. Я міг би досягти цього, надавши на обгортці розділення зліва зліва, але на кожній сторінці буде різна кількість сторінок, так що це не буде працювати. Ось мій код:

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

Щоб отримати ідею, чого я хочу:

alt текст


Вся властивість властивості float полягає в розташуванні елемента вздовж лівої або правої частини його контейнера.
Роб

3
@Rob: Ну, мені потрібно було визначити ширину та висоту для елементів зв’язку, що можна зробити лише на елементах блоку, але коли ви зробите блок посилань, вони поширюються на новий рядок кожен, тому я змусив їх плавати.
Майк

Альтернативне рішення, коли ви не хочете / не можете використовувати вбудований блок. stackoverflow.com/questions/1232096 / ...
Хакунін

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

8
@AndreiGheorghiu якщо ви вважаєте це, запропонуйте редагувати замість позначення її для модників. Будь-хто може редагувати ці запитання, тому відредагуйте питання та напишіть детальне пояснення з причини редагування. Це може робити кожен користувач, він не повинен бути модератором. У питанні чи будь-яких відповідях, що вимагають втручання модератора, немає нічого поганого
Зоя

Відповіді:


406

Видалення floats та використання 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);
 }

(видаліть рядки, починаючи з -і додайте рядки, починаючи з +.)

inline-block працює в крос-браузері, навіть на IE6, доки елемент спочатку є вбудованим елементом.

Цитата з quirksmode :

Вбудований блок розміщується в рядку (тобто в тій же лінії, що і суміжний вміст), але він поводиться як блок.

це часто може ефективно замінити поплавці:

Реальне використання цього значення - це коли ви хочете надати вбудованому елементу ширину. За деяких обставин деякі веб-переглядачі не дозволяють ширину реального вбудованого елемента, але якщо ви переключитесь на показ: вбудований блок, вам дозволяється встановлювати ширину. " ( http://www.quirksmode.org/css/display.html#inlineblock ).

З специфікації W3C :

[inline-block] призводить до того, що елемент генерує контейнер блоку рівнинного рівня. Внутрішня частина вбудованого блоку відформатована як блок блоку, а сам елемент відформатований як атомний рядок вбудованого рівня.


10
Порада: Не забувайте про вертикальне вирівнювання.
Синексис

5
Так, це один з небагатьох випадків, коли я виявив, що вертикальне вирівнювання насправді робить те, що ви очікуєте.
Майк Турлі

4
Мінусом цього методу є те, що важко контролювати горизонтальний інтервал, оскільки між елементами може з’явитися пробіл.
Xavier Poinas

@XavierPoinas: використовуйте розмір шрифту: 0; на батьків, щоб вирішити цю проблему
roelleor

Майте на увазі, що розмір шрифту: 0 не працює на пристроях Android. Не впевнений, чи це все ще справедливо для останніх версій.
Андреас Баумгарт

150

Оскільки я багато років використовую старий трюк, про який я дізнався в якомусь блозі, вибачте, що не пам'ятаю ім'я, щоб надавати йому кредити.

У будь-якому випадку для центру плаваючих елементів це повинно працювати:

Вам потрібна така структура:

    .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 +.


1
Нагадування, що це працює, якщо є лише один елемент з поплавком.
Wtower

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

Це не margin: 0 auto;
матиме значень

1
Для мене float: left;не було необхідності на .main-containerі .fixer-container.
csum

@cleversprocket Я вирішив горизонтальну прокрутку, обернувши все в одному overflow: hidden;
діві

36

Центрувати поплавці легко . Просто використовуйте стиль для контейнера:

.pagination{ display: table; margin: 0 auto; }

змінити поле для плаваючих елементів:

.pagination a{ margin: 0 2px; }

або

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; } 

а решту залиште так, як є.

Це найкраще рішення для мене, щоб відображати такі речі, як меню або сторінки.

Сильні сторони:

  • крос-браузер для будь-яких елементів (блоки, елементи списку тощо)

  • простота

Слабкі сторони:

  • він працює лише тоді, коли всі плаваючі елементи знаходяться в одному рядку (що зазвичай нормально для меню, але не для галерей).

@ arnaud576875 Використання елементів вбудованого блоку буде чудовим (крос-браузер) у цьому випадку, оскільки пагинація містить лише якір (вбудований), відсутні елементи списку чи знаки:

Сильні сторони:

  • працює для багаторядкових елементів.

Слабкі сторони:

  • проміжки між елементами вкладеного блоку - він працює так само, як пробіл між словами. Це може спричинити деякі проблеми з обчисленням ширини контейнера та полями стилізації. Ширина зазорів не є постійною, але специфічна для браузера (4-5 пікселів). Щоб позбутися від цих прогалин, я додав би код arnaud576875 (не повністю перевірений):

    .пагінація {інтервал між словами: -1em; }

    .пагінація a {пробіл слів: .1em; }

  • він не працюватиме в IE6 / 7 на елементах блоку та списку


показ: настільний трюк неймовірний, просто робив усе як слід лише за допомогою кількох рядків. Мені потрібно це пам’ятати. Ура
кілоп

Техніка вбудованого блоку працює надзвичайно добре. На щастя, елементи, які я використовую (вкладені елементи Div) для цього, можуть добре впоратися з розривом.
carolus

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

15

Встановіть контейнер widthв pxі додати:

margin: 0 auto;

Довідково .


1
для мене це найкраща відповідь: P.
alansiqueira27

3
Це буде працювати лише в тому випадку, якщо ширина контейнера є відповідною, що є проблемою, коли він містить плаваючі елементи.
Wtower

11

Використання 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 -->


5

Я думаю, що найкращим способом є використання marginзамість цього display.

Тобто:

.pagination a {
    margin-left: auto;
    margin-right: auto;
    width: 30px;
    height: 30px;    
    background: url(/images/structure/pagination-button.png);
}

Перевірте результат та код:

http://cssdeck.com/labs/d9d6ydif


1
Працює з просто запасом: авто; замість індивідуальних лівих та правих властивостей теж.
cellepo



1

Додайте це до вашої стилізації

position:relative;
float: left;
left: calc(50% - *half your container length here);

* Якщо ширина вашого контейнера 50px, покладіть 25px, якщо це 10em, поставте 5em.


1

Ви також можете зробити це, змінивши .pagination, замінивши "text-align: center" на два-три рядки css наліво, перетворити та, залежно від обставин, положення.

.pagination {
  left: 50%; /* left-align your element to center */
  transform: translateX(-50%); /* offset left by half the width of your element */
  position: absolute; /* use or dont' use depending on element parent */
}
.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 -->


0
<!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, які ви хочете, і надайте їм певну ширину, як 100 пікс

крок 2

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


-1

Просто додавання

left:15%; 

в моє меню css від

#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}

також зробив фокус із фокусуванням


4
15% - це просто довільний характер.
Wtower
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.