1

Создал блок, а вот расположить его по-центру не могу, выравнивается только текст, а вот блок целиком не знаю как.

div {
  text-align: center;
  vertical-align: text-bottom;
  background: #D2B48C;
  display: inline-block;
  width: 300px;
  height: 50px;
}
<div class="сontainer-menu">
  <div class="Menu-Main">Главная</div>
  <div class="Menu-Contacts">Контаты</div>
  <div class="Menu-Feedback">Обратная связь</div>
  <div class="Menu-Reviews">Отзывы</div>
</div>

5
  • Расположить по центру ЧЕГО? В этом идея.
    – axdrv
    24 фев 2018 в 20:22
  • расположить по центру экрана
    – Дима
    24 фев 2018 в 20:24
  • вот html code: <div class = "Container-Menu"> <div class = "Menu-Main" >Главная</div> <div class = "Menu-Contacts" >Контаты</div> <div class = "Menu-Feedback" >Обратная связь</div> <div class = "Menu-Reviews" >Отзывы</div>
    – Дима
    24 фев 2018 в 20:24
  • да, вот css code: div{ text-align: center; background: #D2B48C; display: inline-block; width: 300px; height: 50px; }
    – Дима
    24 фев 2018 в 20:25
  • @Дима, если вам помогло чьё-то решение, то отметьте его "галочкой"
    – Arthur
    25 фев 2018 в 15:32

3 ответа 3

2

Вариант с display: flex:

.container-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.container-menu>div {
  background: #D2B48C;
  width: 300px;
  height: 50px;
}
<div class="container-menu">
  <div class="Menu-Main">Главная</div>
  <div class="Menu-Contacts">Контаты</div>
  <div class="Menu-Feedback">Обратная связь</div>
  <div class="Menu-Reviews">Отзывы</div>
</div>

2
  • 1
    Опередил меня на три секунды)))), писал второй вариант...
    – Air
    24 фев 2018 в 20:35
  • 1
    @Air, будешь третий писать, про position: absolute?))))
    – Arthur
    24 фев 2018 в 20:37
1

Вариантов куча, это один из них margin: auto;

div {
  text-align: center;
  vertical-align: text-bottom;
  background: #D2B48C;
  width: 300px;
  height: 50px;
  margin: auto;
}
<div class="Container-Menu">
  <div class="Menu-Main">Главная</div>
  <div class="Menu-Contacts">Контаты</div>
  <div class="Menu-Feedback">Обратная связь</div>
  <div class="Menu-Reviews">Отзывы</div>
</div>

0

У Вас ошибка в том, что в css выбираете все теги div, в эту выборку попадают все дочерние и родительский блок. Лучше всем дочерним блокам дать общий класс, к примеру class="menu" и в стилях обращаться к нему. И если все таки inline-block у дочерних блоков, то вариант такой

.container {
  width: 300px;
  text-align: center;
}

.menu {
  vertical-align: text-bottom;
  background: #D2B48C;
  height: 50px;
  display: inline-block;
  width: 100%;
}
<div class="container">
  <div class="menu menuMain">Главная</div>
  <div class="menu menuContacts">Контаты</div>
  <div class="menu menuFeedback">Обратная связь</div>
  <div class="menu menuReviews">Отзывы</div>
</div>

2
  • В описании все верно, я тоже так считаю, только не понятно, почему блок не по середине? И зачем дочерним блокам ` position: relative;`?
    – Air
    24 фев 2018 в 22:57
  • Сей вариант не работает. text-align: center; должен быть применен к родителю.
    – Telion
    25 фев 2018 в 1:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.