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 you have read our privacy policy.

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