Как выровнять текст относительно иконки

Рейтинг: 0Ответов: 1Опубликовано: 08.02.2023

Не могу выровнять текст как на макете. Как это сделать?

.layout-join-footer {
  padding-top: 25.4px;
}

.layout-footer, .layout-join-footer {
  height: 237px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: 19px;
  color: #494949;
  background-color: #ffffff;
}
<div class="layout-join-footer">
  <a href="{{.Link}}" style="font-size: 15px;">
    <svg width="16" height="20" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 13.5px">
      <path d="M14.5 18.5C14.5 18.775 14.276 19 14 19H2C1.724 19 1.5 18.775 1.5 18.5V2.5C1.5 2.225 1.724 2 2 2H8V6.5C8 7.604 8.896 8.5 10 8.5H14.5V18.5ZM9.5 3.121L13.378 7H10C9.724 7 9.5 6.775 9.5 6.5V3.121ZM15.414 6.914L9.585 1.086C9.559 1.06 9.527 1.04 9.5 1.016C9.429 0.952 9.359 0.889 9.281 0.836C9.241 0.809 9.195 0.791 9.153 0.768C9.082 0.728 9.012 0.684 8.937 0.652C8.74 0.57 8.528 0.529 8.313 0.514C8.266 0.511 8.22 0.5 8.172 0.5H8.171H8H2C0.896 0.5 0 1.396 0 2.5V18.5C0 19.604 0.896 20.5 2 20.5H14C15.104 20.5 16 19.604 16 18.5V8.5V8.328C16 7.798 15.789 7.289 15.414 6.914Z" fill="#0099C0"/>
    </svg>
    Документация
  </a>
</div>

макет

css html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Контейнер вашей иконки и текста в строчном состоянии (display: inline;) по умолчанию. Так он не способен позиционировать элементы внутри себя. Достаточно делать его гибким (display: flex) и дочерние элементы у него автоматически встанут в ряд.
Так же добавляем align-items: center; для центрирования дочерних элементов.
Спасибо Oliver Patterson за упоминание

.layout-join-footer {
  padding-top: 25.4px;
}

.layout-footer,
.layout-join-footer {
  height: 237px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: 19px;
  color: #494949;
  background-color: #ffffff;
}
<div class="layout-join-footer">
  <a href="{{.Link}}" style="font-size: 15px; display: flex; align-items: center;">
    <svg width="16" height="20" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 13.5px;">
      <path d="M14.5 18.5C14.5 18.775 14.276 19 14 19H2C1.724 19 1.5 18.775 1.5 18.5V2.5C1.5 2.225 1.724 2 2 2H8V6.5C8 7.604 8.896 8.5 10 8.5H14.5V18.5ZM9.5 3.121L13.378 7H10C9.724 7 9.5 6.775 9.5 6.5V3.121ZM15.414 6.914L9.585 1.086C9.559 1.06 9.527 1.04 9.5 1.016C9.429 0.952 9.359 0.889 9.281 0.836C9.241 0.809 9.195 0.791 9.153 0.768C9.082 0.728 9.012 0.684 8.937 0.652C8.74 0.57 8.528 0.529 8.313 0.514C8.266 0.511 8.22 0.5 8.172 0.5H8.171H8H2C0.896 0.5 0 1.396 0 2.5V18.5C0 19.604 0.896 20.5 2 20.5H14C15.104 20.5 16 19.604 16 18.5V8.5V8.328C16 7.798 15.789 7.289 15.414 6.914Z" fill="#0099C0"/>
    </svg>
    Документация
  </a>
</div>