div中的垂直居中答案

【问题标题】：Vertical centering in a divdiv中的垂直居中
【发布时间】：2018-04-10 15:44:35
【问题描述】：

我在使徽标和链接垂直对齐时遇到问题。我尝试使用内联块来实现这一点，并将vertical-align 设置为middle，但没有成功。

我知道我可以使用弹性框来实现这一点。但我不想使用弹性盒子。如果我必须使用 flex，那么 flex box 是否能更好地实现正确对齐？

如有任何帮助，我们将不胜感激。

.header {
  padding: 20px;
  background: #000;
  color: #fff;
}

.logo,
ul {
  display: inline-block;
  vertical-align: middle;
}

ul {
  list-style: none;
  float: right;
}

ul li {
  display: inline-block;
}

<div class="header">
  <div class="logo">XCode</div>
  <ul>
    <li>Account settings</li>
    <li>Profile</li>
    <li>Logout</li>
  </ul>
</div>

【问题讨论】：

How do I vertically center text with CSS?的可能重复
这不是同一个问题/问题

标签： html css flexbox centering

【解决方案1】：

在许多浏览器中，ul 元素带有默认的顶部和底部边距。

铬：

这些边距偏离了垂直居中。只需删除它们。

.header {
  padding: 20px;
  background: #000;
  color: #fff;
}

.logo, ul {
  display: inline-block;
  vertical-align: middle;
}

ul {
  margin: 0; /* NEW */
  list-style: none;
  float: right;
}

ul li {
  display: inline-block;
}

<div class="header">
  <div class="logo">XCode</div>
  <ul>
    <li>Account settings</li>
    <li>Profile</li>
    <li>Logout</li>
  </ul>
</div>

【讨论】：

得到了它。非常感谢完美

【解决方案2】：

在某些浏览器中，<ul> 元素默认有边距。

试试

ul {
  list-style: none;
  float: right;
  margin: 0;
}

删除默认边距。

【讨论】：

【解决方案3】：

ul {
  list-style: none;
  float: right;
  margin:0 auto;
}
margin:0 auto; will help you to set the ul element in vertically align.

.header {
  padding: 20px;
  background: #000;
  color: #fff;
}

.logo,
ul {
  display: inline-block;
  vertical-align: middle;
}

ul {
  list-style: none;
  float: right;
  margin:0 auto;
}

ul li {
  display: inline-block;
}

<div class="header">
  <div class="logo">XCode</div>
  <ul>
    <li>Account settings</li>
    <li>Profile</li>
    <li>Logout</li>
  </ul>
</div>

【讨论】：

【解决方案4】：

您可以查看 Bulma，特别是他们的 Level 属性。这在后台使用 flexbox，但您不必学习它 - 只需易于使用的类！

<!-- Main container -->
<nav class="level">

    <!-- Left side -->
    <div class="level-left">
        <div class="level-item">
            <p class="subtitle is-5">Content</p>
        </div>

    </div>

    <!-- Right side -->
    <div class="level-right"> 
        <p class="level-item">More Content</p> 
        <p class="level-item"><a class="button is-success">New</a></p>
    </div>
</nav>

【讨论】：

【解决方案5】：

边距：0；会帮助你的。

ul {
  list-style: none;
  float: right;
  margin: 0;
}

https://jsfiddle.net/n0o915w3/1/

【讨论】：