1

Как выравнять элемент по центру, если у него display:inline-block, свойство text-align:center не работает. Структура что-то вроде такого

<div class="parent">
   <div class="event" style="float:left">
    ....
   </div>
    <div class="div1">
     <div class="div1_1>
      ....
     </div>
     <div class="div1_2>
      .....
     </div>
     <div class="div1_3>
      ....
     </div>
    </div>
  </div>
8
  • Добрый вечер. Какой именно элемент надо равнять?
    – user216615
    9 мар 2018 в 18:23
  • подправил... нужно выравнять элемент div1 по центру 9 мар 2018 в 18:26
  • а с классом event что Вы хотите сделать?
    – user216615
    9 мар 2018 в 18:36
  • У класса event float:left и все 9 мар 2018 в 18:43
  • Это понятно, но как он расположен? Прижат слева к родительскому или как?
    – user216615
    9 мар 2018 в 18:51

2 ответа 2

1

Приходится ванговать ... как обычно на flexbox

* {
  margin: 0;
  padding: 0;
}

.parent,
.div_1 {
  display: flex;
}

.parent {
  justify-content: space-between;
  padding: 30px 0;
}

.event {
  padding: 0 30px;
}

.div_1 {
  justify-content: center;
  width: 100%;
}

.div_1 * {
  padding: 0 20px;
}
<div class="parent">
  <div class="event">
    event
  </div>
  <div class="div_1">
    <div class="div_1_1">
      div_1_1
    </div>
    <div class="div_1_2">
      div_1_2
    </div>
    <div class="div_1_3">
      div_1_3
    </div>
  </div>
</div>

всё остальное оставил на своё усмаотрение

1

Попробуй через margin: 0 auto;, или через flexbox display: flex; align-items: center; justify-content: center;

Ваш ответ

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

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