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

我没有经常使用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>

因此，我将文本放在左侧

float:left

，将徽标放在右侧

float:right

。到现在为止，一直都还不错。现在，我想将这两个元素与具有一定高度的父对象的垂直中间对齐

这就是我希望它看起来的样子（蓝色矩形是徽标）：

我尝试过使用

垂直对齐：中间

，但没有成功。我还偶然发现了

display:table cell

和

display:inline

，但我一定是用错了，否则它也不起作用。我是否必须在headline元素中使用另一个“包装器”

编辑：谢谢你关于小提琴的提示；我试图编辑一个：

---

谢谢你的帮助

您可以使用一些CSS来实现这一点。还要检查特定于供应商的转换

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

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

小提琴的更新版本：

---

您可以使用一些CSS来实现这一点。还要检查特定于供应商的转换

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

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

小提琴的更新版本：

---

我已经更新了你的小提琴。我只是添加了

display:table添加到包装div，并为两个内部div提供以下样式：

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

我还使用flexbox制作了一个版本

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

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

我已经更新了你的小提琴。我只是添加了
display:table添加到包装div，并为两个内部div提供以下样式：

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

我还使用flexbox制作了一个版本

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

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

您可以使用
display:table
和
display:table cell
以及
vertical align:middle
来实现这一点

我已经从您的原始
CSS
中删除了一些不相关的部分，以便更容易地看到不同之处

要在添加
填充
或
边距
后使其完美工作，请检查以下链接：

您可以使用
显示：表格
和
显示：表格单元格
以及
垂直对齐：中间
来实现这一点

我已经从您的原始
CSS
中删除了一些不相关的部分，以便更容易地看到不同之处

要在添加
填充
或
边距
后使其完美工作，请检查以下链接：

我会选择这样简单的方式。只需在要居中的内容周围放置包装，并使用页边空白：

我会选择像这样简单的。只需在要居中的内容周围放置包装，并使用页边空白：

我认为，为了使用
display:table cell
，您的父div（
#headline
）必须是
display:table
，您能在这里列出您需要的内容吗？这有点难理解。你也应该去看看，只是要知道浏览器的支持。（您需要使用
align items:center；
属性）同意Zach的意见，我无法理解，并且有一个很好的网站可以帮助您解决问题@ZachLeighton抱歉。我添加了一个显示所需结果的图像。我想为了使用
display:table cell
，您的父div（
#headline
）必须是
display:table
，您能在这里画出您需要的吗？这有点难理解。你也应该去看看，只是要知道浏览器的支持。（您需要使用
align items:center；
属性）同意Zach的意见，我无法理解，并且有一个很好的网站可以帮助您解决问题@ZachLeighton抱歉。我已经添加了一个显示想要的结果的图像。谢谢。看起来差不多不错。也就是说，我认为第一行的左上角现在在中间。我希望文本完全围绕垂直中间居中。然而，我觉得这有点复杂。这不是经常在实践中使用吗？@MatthiasWeber如其他人所指出的，如果这对你不起作用，也许可以看看flex box。谢谢。看起来差不多不错。也就是说，我认为第一行的左上角现在在中间。我希望文本完全围绕垂直中间居中。然而，我觉得这有点复杂。这不是经常在实践中使用吗？@MatthiasWeber正如其他人所指出的，如果这对你不起作用，也许可以看看flex box。添加神奇数字不是一个好的实践，就像你为
页边顶部定义了一个固定值一样。我同意@MelanciaUK。屏幕大小和内容一直在变化。这与精确无关。。。这只是一个坏习惯，我也同意：），但如果我想，我会让一个框架替我做这些肮脏的工作website@MelanciaUK你似乎在评论中完美地回答了这个问题，为什么不发布你的答案呢？添加幻数不是一个好的做法，就像你为
页边距顶部定义了一个固定值一样。我同意@MelanciaUK。屏幕大小和内容一直在变化。这与精确无关。。。这只是一个坏习惯，我也同意：），但如果我想，我会让一个框架替我做这些肮脏的工作website@MelanciaUK你似乎已经在评论中完美地回答了这个问题，为什么不发布你的答案呢？谢谢你的回答。我还要看一下flexbox。我现在正在尝试使用
display:table cell
方法。@MatthiasWeber我不怪你，它有更好的支持。
<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>

 #wrapper {
      margin-top: 60px;
  }