时间戳

首页 > 解决方案 > 如何垂直对齐骨架按钮和h1？

css - 如何垂直对齐骨架按钮和h1？

问题描述

我发现 Skeleton 中 h1 元素内的按钮在以下代码段中未垂直对齐 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 并不能解决这个问题。

标签： css

解决方案

使 h2 成为一个 flexbox并从 a 标签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>

推荐阅读