Как в блоке установить один элемент ровно по центру, а другой справа

Question

У меня есть блок div в форме прямоугольника внутри которого ещё два блока, один с текстом, другой с маленьким изображением. Как я правильно могу расположить их так, чтобы блок с текстом был ровно по центру, а второй блок находился справа. Через display: flex я задал им flex-direction: row. Стоит ли вообще использовать flex для этого или и через flex можно их разместить как мне требуется?

Прошу прощения и прикрепляю фото того, что нужно изменить. Мне нужно чтобы блок с текстом стоял ровно в центре прямоугольника, а иконка треугольника была сбоку справа.

Прикрепляю так же html/css код:

<div class = "Navigation_item_look">
     <div>
          <a href="/Post">Статьи</a>
     </div>
                        
     <div class = "roll_icon">
          <a>▼</a>
     </div>
</div>

.Navigation_item_look{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

width: 100%;
height: 30px;
}

.roll_icon{
transform: rotate(90deg);
}

Answer 1

Первому элементу даётся margin: 0 auto; - проверенный способ центрирования с начала зарождения CSS.
А также второму задаётся float: right; - также работающий с бородатых времён.
clear:both; не нужен у второго элемента, но может понадобиться элементу идущему после элемента с стилем float: right или left;. Дело в том, что float предназначен для обтекания контента, а не центрирования(то есть у него высота становится ноль), поэтому нужно идущему после него элементу ставить clear: both;, чтобы он не обтекал его.

.first, .second {
  background-color: red;
  display: block;
  box-sizing: border-box;
  width: 150px;
  height: 150px;
}
.first {
  margin: 5px auto;
}
.second {
  clear: both;
  float: right;
}

<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
</div>

БЛОГ НА HUSL

Как в блоке установить один элемент ровно по центру, а другой справа

Ответы (1 шт):