html - 如何保证一行中不同的html元素是水平的？

Question

我在 this jsfiddle 上有一个问题的例子- 我有一行包含两种不同类型的元素，一个 h2 标签，还有一个 span 标签。我将它们放在同一行中，希望它们看起来水平，但是，h2 标记在屏幕上显示的比 span 标记中的内容低，导致元素位于不同行中的不良外观。

问题:有没有什么方法可以包装或设置这些元素的样式以确保它们出现在同一层级？请注意，在我正在构建的应用程序中，有不止一个 span 标签。

<div class="grid-container outline">
    <div class="row">
        <div class="col-4">
            <h2>Hello</h2>

        </div>
        <div class="col-2">
            <span class="blah">blah</span>
        </div>
    </div>
</div>

CSS

    .grid-container {
        width: 100%;
        max-width: 1200px;
    }
    /*-- our cleafix hack -- */
    .row:before, .row:after {
        content:"";
        display: table;
        clear:both;
    }
    [class*='col-'] {
        float: left;
        min-height: 1px;
        width: 16.66%;
        /*-- our gutter -- */
        padding: 12px;

    }
    .col-1 {
        width: 16.66%;
    }
    .col-2 {
        width: 33.33%;
    }
    .col-3 {
        width: 50%;
    }
    .col-4 {
        width: 66.66%;
    }
    .col-5 {
        width: 83.33%;
    }
    .col-6 {
        width: 100%;
    }
    .outline, .outline * {
        outline: 1px solid #F6A1A1;
    }
    /*-- some extra column content styling --*/
    [class*='col-'] > p {

        padding: 0;
        margin: 0;
        text-align: center;
        color: white;
    }
div {
    box-sizing:border-box;
}

Answer 1

由于 h2 上的边距，h2 和 span 元素出现在不同的级别。要删除它，只需添加:

  h2{
    margin:0px;
    }

之后，如果您增加 span 的字体大小以匹配 H2，它们应该水平显示。

有一个名为 flexbox 的 CSS 属性可以更轻松地垂直或水平放置 HTML 元素。 CSS 技巧有一篇关于该主题的综合文章。

使用本文中提到的技术:http://learnlayout.com/flexbox.html ，我已将下面的 CSS 类添加到 h2 和 span 的父 div。

.vertical-container {

 height: 60px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

JSfiddle 在这里:https://jsfiddle.net/bggwoecx/5/