Выравнивание элементов в одной строке

Question

У меня есть два элемента: Первый - это navbar, который мне нужно расположить горизонтально по центру, а второй - это иконка корзины, которая должна быть на определенном расстоянии вправо от navbar'а. Как мне реализовать это?

Answer 1

Проще всего, конечно если условия соблюдаются, т.е. известны размеры, сделать отступ с противоположной стороны такой же, сколько "съедается" пространства с другой стороны.

.block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.navbar {
  display: block;
  width: 300px;
  height: 30px;
  background: #ccc;
  margin-right: 50px;
  margin-left: 80px; /* 50px (margin-right) + 30px (navbar width) */
}

.basket {
  display: block;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: #ddd;
}

/* for demo */
body {height: 100vh; overflow: hidden;}
body::before {
  content: '';
  display: block;
  width: 1px;
  height: 100vh;
  background: rgba(0,0,255,.5);
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 1;
}
.navbar, .basket {position: relative;}
.navbar::before, .basket::before {
  content: attr(class);
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

<div class="block">
  <div class="navbar"></div>
  <div class="basket"></div>
</div>

В данном примере "съедается" 80px, из которых 50px - отступ справа от .navbar и 30px - размер .basket, тогда мы добавляем для .navbar margin=left: 80px.

БЛОГ НА HUSL

Выравнивание элементов в одной строке

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