Как выровнять по вертикали кнопку Skeleton и h1? - PullRequest
Новая
       0

Как выровнять по вертикали кнопку Skeleton и h1?

0 голосов
/ 25 апреля 2020

Я обнаружил, что кнопка внутри элемента h1 в Skeleton не выровнена по вертикали в следующем фрагменте https://jsfiddle.net/zzmaster/to8xcLdk/2/

        <div class="row">
            <div class="twelve columns">
            <h2>
                <a href="#" class="button">i am button</a>
                i am header
            </h2>
            </div>
        </div>
  </div>

У меня есть подозрение, что line-height является проблема, но установка равных значений на h1 и .button не решает эту проблему.

1 Ответ

1 голос
/ 25 апреля 2020

Сделайте h2 flexbox с align-items:center и удалите margin-bottom из тега: 

h2 {
    display: flex;
    align-items: center;
}

h2 a{
    margin-bottom: 0 !important;
    margin-right: 20px;
}
<!doctype html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
</head>

<body>
  <div class="container">

    <div class="row">
      <div class="twelve columns">
        <h2>
          <a href="#" class="button">i am button</a> i am header
        </h2>
      </div>
    </div>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...