Як зробити блок по центру в css

15

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

Центрування

Є багато елементів на веб-сторінці, які можуть по дизайну стояти по центру. Наприклад, заголовки, логотип в шапці або інформація в футері. Але як вирівняти її ідеально по центру? Звичайно, потрібно розуміти, що вираховувати вручну відступи або застосовувати позиціонування не варто, коли є чудове значення властивості margin – auto:

.block{
margin: 0 auto;
}

Перше значення цієї властивості задає відступ зверху і знизу. Відповідно, замість нуля ви можете записати своє значення, якщо необхідно дати такі відступи. Друге значення auto визначає відступи ліворуч і праворуч. Вони визначаються так, що елемент стане по центру. Але тут дуже важливо дотримати ще одне правило:

Елементу потрібно задати ширину. Обов’язково. Я поясню чому. Наприклад, він перебуває у загальному контейнері шириною 980 пікселів. І якщо ви не поставите явну ширину блоку, то він вирівняється по центру, якщо він і без цього займає всю ширину? Загалом, досить записати width або max-width і центрування буде працювати.

Таким же способом можна відцентрувати і ті блоки, які будуть вкладені вже в цей. Взагалі рівень вкладеності ніяк не завадить центрування.

Як створити блок в css і його зовнішній вигляд

Я вже говорив в одній з попередніх статей, що блокові елементи створюються тегом div. Він парний. Це просто пустий контейнер для вмісту. Йому потрібно також задати стильової клас або ідентифікатор, щоб отримати можливість звертатися до нього через css. Скажімо, так:

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

.post-anonce{
margin: 10px;
padding: 15px;
background: #ccc;
border-radius: 15px;
width: 250px;
height: 220px;
}

Ми дали нашому фрагменту багато різних правил. Наприклад, зовнішні і внутрішні відступи, фон, закруглення кутів, а також основні розміри – ширину і висоту.

Як зробити блок по центру в css

Додамо вміст

Ми створили блок для анонсу, але самого анонсу в ньому поки немає. Давайте додамо його, щоб було як на реальному сайті. Що взагалі включає в себе анонс? Зазвичай дату публікації та ім’я автора, заголовок статті, зображення-мініатюру і кнопку читати далі. Але давайте зробимо простий анонс: заголовок, картинка і кнопка.

Як зробити блок по центру в css

Заголовок статті

Це текст анонсу, зазвичай у нього поміщаються перші 40-50 слів з статті,
Щоб читач міг приблизно зрозуміти, про що вона буде.

Читати повністю

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

Картинку ми поставили, як ніби вона лежить в тій же папці, що і css-файл, в якому задаються ці стилі. Тепер залишається оформити її:

.post-anonce img{
width: 64px;
height: 64px;
padding: 10px;
float: left
}

Поставимо їй чіткі розміри, притиснемо до лівого краю, щоб текст обтекал праворуч, також дамо невеликі відступи. І ось що в результаті вийшло:

Як зробити блок по центру в css

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

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

Як зробити блок невидимим в css

На початку я обіцяв вам ще кілька маніпуляцій з блоками. Розглянемо їх коротко, вони стосуються видимості елемента на сторінці. Наприклад, додамо щойно створеного блоку таку властивість: display: none;

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

Застосування на практиці

Зробимо наш блок прозорим і додамо перед ним слова, на які потрібно буде навести для того, щоб він з’явився.

Наведи сюди, щоб побачити анонс

Так ми створили потрібний блок.

.post-anonce{
Opacity: 0;
}

Зробили анонс прозорим.

.show-anonce:hover + .post-anonce{
opacity: 1;
}
.post-anonce:hover{
opacity: 1;
}

Ці правила означають наступне: при наведенні на блок show-anonce наш анонс буде ставати непрозорим, тобто повністю видимим. Теж станеться і коли курсор знаходиться на сам анонс, щоб він не зникав з уваги відразу.

Як зробити блок по центру в css

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

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