垂直对齐 header div 中的元素（文本和徽标）

Question

我没有经常使用 CSS。即使遇到最简单的布局问题，我也总是被卡住。即使我正在读书，我也无法弄清楚以下内容是如何工作的：

我想设计一个顶部有 header 的网站，然后是菜单栏，然后是内容。菜单栏和内容运行良好。但我想要一个 header，左边有一些 header 文本，右边有一个徽标。

所以我采用了这种方法：

<div id="headline">
<div id="headertext">Some title<br/>some more title text</div>
<div id="logo"><a href="http://www.example.com/~somelink"><img src="somelogo.png" /></a></div>
</div>

而对于 CSS：

  #headline { overflow: hidden;
            height: 224px;
            text-align: left;
            padding: 0px 80px 0px 80px;
          }

  #headertext { font-family: "Trebuchet MS", Helvetica, sans-serif;
          font-size: 20pt;
          color: #000000;
          float: left;
          font-weight: bold;
        }
  #logo    { 
          float: right;
        }

所以我做了左边的文字float: left和右边的标志float: right。到目前为止，一切都很好。现在我想将两个元素对齐到具有一定高度的 parent <div> 的垂直中间。

这是我想要的样子（蓝色矩形是徽标）：

我试过使用 vertical-align: middle 但这行不通。我也偶然发现了 display:table-cell 和 display: inline 但我一定是用错了它，或者它也不起作用。我必须在标题元素中使用另一个 "wrapper" <div> 吗？

编辑：感谢有关 fiddle 的提示；我试着编辑了一个：http://jsfiddle.net/f5vpakdv/

感谢您的帮助！

Answer 1

您可以使用一些 CSS 来完成此操作。还要检查特定于供应商的转换。

.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

这是一个 fiddle，我添加了另一个 div 包装器。

http://jsfiddle.net/5o3xmfxn/

您的 fiddle 的更新版本：

http://jsfiddle.net/f5vpakdv/1/

Answer 2

我已经更新了你的 fiddle here。我只是将 display:table; 添加到包装 div 中，并为两个内部 div 提供了一种样式：

display:table-cell;
vertical-align:middle;

我也用flexbox做了一个版本here

我刚刚将以下样式添加到您的包装中 div:

display:flex;
align-items:center;
justify-content:space-between;

Answer 3

您可以使用 display: table 和 display: table-cell 以及 vertical-align: middle.

来实现此目的

我已经从你的原始 CSS 中删除了一些不相关的部分，以便更容易看出有什么不同。

要使其在添加 padding 或 margin 后完美运行，请检查此 link：Box Sizing | CSS-Tricks.

<div id="headline">
    <div id="headertext">
        Some title<br/>some more title text
    </div>
    <div id="logo">
        <div id="fakeImg"></div>
    </div>
</div>

...

#headline {
    width: 100%;
    height: 224px;
    background: yellow;
    display: table;
}
#headertext {
    text-align: left;
}
#headertext,
#logo {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}
#fakeImg {
    width: 100px;
    height: 100px;    
    background: blue;
    float: right;
}

Demo

Answer 4

我会选择像这样更简单的东西。只需将包装器放在您想要居中的内容周围并使用 margin-top：http://jsfiddle.net/f5vpakdv/2/

<div id="headline">
    <div id="wrapper">
        <div id="headertext">Some title some
            <br/>more title text</div>
        <div id="logo"><a href="http://www.example.com/~somelink"><img src="somelogo.png" width="198px" height="120px" /></a>
        </div>
    </div>
</div>

CSS

 #wrapper {
      margin-top: 60px;
  }

垂直对齐 header div 中的元素（文本和徽标）

Vertically align elements in header div (text and logo)

html

css

vertical-alignment