Question

我还没经常使用过CSS。即使遇到最简单的布局问题，我也总是陷入困境。即使我正在读一本书，我也无法弄清楚以下是如何工作的：

我想设计一个网站，其顶部有一个标题，然后是菜单栏，然后是内容。菜单栏和内容工作得很好。但是我希望左边有一些标题文字，右边有一个标识。

所以我采取了这种方法：

<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制作了徽标。到现在为止还挺好。现在我想将两个元素对齐到具有一定高度的父<div>的垂直中间。

Example

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

enter image description here

我尝试使用vertical-align: middle，但这没有用。我也偶然发现了display:table-cell和display: inline，但我必须以错误的方式使用它，否则它也无效。我是否必须使用另一个＆＃34;包装＆＃34;标题元素中的<div>？

编辑：感谢关于小提琴的暗示;我尝试编辑一个：http://jsfiddle.net/f5vpakdv/

感谢您的帮助！

Answer 1

您可以使用display: table和display: table-cell以及vertical-align: middle来实现此目的。

我已从您原来的CSS中删除了一些不相关的内容，以便更容易看到不同的内容。

要在添加padding或margin后使其完美运行，请点击此链接：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 2

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

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

这是一个小提琴，我添加了另一个div包装器。

http://jsfiddle.net/5o3xmfxn/

您的小提琴的更新版本：

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

Answer 3

我更新了你的小提琴here。我只是将display:table;添加到您的包装div中，并为两个内部div设置了一种样式：

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

我还使用flexbox here

创建了一个版本

我刚刚将以下样式添加到包装div：

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

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;
  }

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

4 个答案: