Как выровнять span по центру?

Общее
1

Помогите пожалуйста, в макете идет 3 блока в строку подряд и они стоят ровно по центру, как мне это сделать?

2
2.png844×195 55.4 KB

Все что пишу для спана не работает, например:
span {background-color: aqua; margin: auto; text-align: center; width: 300px;}

Можно подвинуть через margin-left: 15% или что-то типо того, но вроде немного кривовато получается, или так и нужно делать через маргин?

2

Не понял, зачем блоки делать спанами?
А вообще, вариантов много: css-таблицы, flex, grid, inline-block, float. Выбирайте что больше нравится.
На мой взгляд, здесь наиболее оптимальны будут флексы.

<div class="advantages flex">
  <span></span>
  <span></span>
  <span></span>
</div>

.flex { display: flex; }
.advantages { justify-content: space-around; }

Как-то так.

1 лайк
3

Спасибо, флексами получилось.
Слушай, не подскажешь, а как текст добавить еще снизу? который серым. У меня не получается ему задать границы что-то.
Пытался создать еще один абзац, но оно как-то растягивает его и получается некрасиво.

4
4.png904×236 60.1 KB

https://jsfiddle.net/q1z94kyr/ вот код, который у меня получился.

4

т.е. до этого там все в порядке? xD

<div>
  <img src="klaviatura.png" class="advantages flex">
  <p class="advantages__header">Well Crafted</p>
  <p class="advantages__description">Здарова бандиты</p> <!-- вставил тута абзац -->
</div>

.advantages__header {
  font-weight: bold;
}

ну вот так попробуй, стрем все равно выходит. надо что-то делать с классами и неймингом, а то это очень плохо всё.

5

Ну это мой первый мини-макет в жизни :slight_smile:

6

span {
display: block;
text-align: center;
}

7

Теми же флексами: спан делаешь флекс-боксом, ставишь распространение сверху-вниз и выравнивание по центру. Вот примерный код.

<div class="advantages flex">
  <span class="advantage flex">
    <h3>Header</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est accusantium recusandae ullam aliquid repudiandae molestiae, incidunt necessitatibus provident dolores reiciendis cumque alias laborum ab libero veniam quia quas? Cum, dolores!</p>
  </span>
  <span class="advantage flex">
    <h3>Header</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est accusantium recusandae ullam aliquid repudiandae molestiae, incidunt necessitatibus provident dolores reiciendis cumque alias laborum ab libero veniam quia quas? Cum, dolores!</p>
  </span>
  <span class="advantage flex">
    <h3>Header</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est accusantium recusandae ullam aliquid repudiandae molestiae, incidunt necessitatibus provident dolores reiciendis cumque alias laborum ab libero veniam quia quas? Cum, dolores!</p>
  </span>
</div>

.flex { display: flex; }
.advantages {
  justify-content: space-between;
  align-items: center;
  min-height: 100px;
  background-color: lightgray;
.advantage {
  position: relative;
  flex-direction: column;
  width: 400px;
  min-height: 100px;
  padding-top: 120px;
  align-items: center;
  background-color: gray;
  text-align: center;
}
.advantage::before {
  content: '';
  position: absolute;
  top: 20px;
  height: 100px;
  width: 100px;
  background-image: url(img.svg);
}
.advantage > h3 { margin-bottom: 0; }
8
Много-много тегов) <...span...> ... ... span { position: absolute; top: ...px; left: ...px; } ... ...