Як вирівняти по центру блок змінної ширини.

Відео: центруючи елемент змінної ширини

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

Ми вже знаємо, як вирівняти елемент, ширина якого нам відома. Потрібно просто додати margin: 0 auto- Однак якщо ми не знаємо ширину елемента, його властивість width, відповідно, буде відсутній, і цей спосіб вже, на жаль, не спрацює. Як надходити в таких випадках? Давайте дізнаємося.

Відео: Техніка 5 Вирівнювання блоків по ширині гумового блоку

Хорошим прикладом буде блок посторінкового навігації. Він може містити в собі посилання на 3 сторінки, 10 сторінок і т.д. Ми не можемо поставити йому якусь одну ширину. Давайте зверстаємо такий блок.

 
lang="En"gt; 
 
charset="UTF-8"gt; 
Navigation 
 
 
class="Pagination"gt; 
 
href="#"gt;1 
href="#"gt;2 
href="#"gt;3 
href="#"gt;4 
href="#"gt;5

Тепер задамо стилі.

#pagination ul { 
 margin:0auto- 
 overflow: hidden- 
 display: table- 
} 
 
#pagination ul li { 
float: left- 
 border:1px solid # ccc- 
 padding:5px8px- 
 margin-right:3px- 
}

Тобто все, що вам потрібно зробити, це додати блоку display: table- Чому це працює? Як ви знаєте, таблиці не займають 100% ширину, їх ширина обчислюється в залежності від контенту, тому браузер буде утискувати блок до тих розмірів, які потрібні контенту, і, таким чином, він буде знати його ширину і зможе вирівняти блок по центру через звичайний margin: 0 auto- Дякуємо за увагу.

Поділися в соціальних мережах:

Схожі