2

Сверстал 2 кнопки, одна простая, вторая с иконкой. Проблема заключается в том, что обе кнопки не находятся на одной высоте, кнопка с иконкой опустилась на пару пикселей ниже. В чем проблема и как быть?

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

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

.link {
  background: lightgray;
  display: inline-flex;
  font-size: 5rem;
  border: 1px solid;
}

.link__icon {
  padding: 10px 20px;
  line-height: inherit!important;
  background: azure;
}

.link__text {
  padding: 10px 20px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

<div class="container">
  <div class="container__inner">

    <a class="link">
      <span class="link__text">Текст</span>
    </a>

    <a class="link">
      <i class="link__icon far fa-smile"></i>
      <span class="link__text">Текст</span>
    </a>

  </div>
  </div

3 ответа 3

1

Вы поставили display:flex не тому родителю:

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

.container__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.link {
  background: lightgray;
  display: inline-flex;
  font-size: 5rem;
  border: 1px solid;
}

.link__icon {
  padding: 10px 20px;
  line-height: inherit!important;
  background: azure;
}

.link__text {
  padding: 10px 20px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

<div class="container">
  <div class="container__inner">

    <a class="link">
      <span class="link__text">Текст</span>
    </a>

    <a class="link">
      <i class="link__icon far fa-smile"></i>
      <span class="link__text">Текст</span>
    </a>

  </div>
  </div

1

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

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

.link {
  background: lightgray;
  display: inline-flex;
  font-size: 5rem;
  border: 1px solid;
}

.link__icon {
  padding: 10px 20px;
  line-height: inherit!important;
  background: azure;
}

.link__text {
  padding: 10px 20px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

<div class="container">
  

    <a class="link">
      <span class="link__text">Текст</span>
    </a>

    <a class="link">
      <i class="link__icon far fa-smile"></i>
      <span class="link__text">Текст</span>
    </a>

  
  </div

0

По вопросу - нужно было выставить vertical-align: bottom; кнопкам .link.

@Alex и @Александр Срокин спасибо, что обратили внимание на flex контейнер, действительно, не верно выставил.

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

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

.link {
  background: lightgray;
  display: inline-flex;
  font-size: 5rem;
  border: 1px solid;
  vertical-align: bottom;
}

.link__icon {
  padding: 10px 20px;
  line-height: inherit!important;
  background: azure;
}

.link__text {
  padding: 10px 20px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

<div class="container">
  <div class="container__inner">

    <a class="link">
      <span class="link__text">Текст</span>
    </a>

    <a class="link">
      <i class="link__icon far fa-smile"></i>
      <span class="link__text">Текст</span>
    </a>

  </div>
</div>

Ваш ответ

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

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