0

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

.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>

макет

1 ответ 1

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>

1
  • Я бы еще добавил align-items: center 8 фев в 13:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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