垂直居中于div

Question

我的问题是我的徽标和链接垂直对齐。我尝试使用内联块并将vertical-align设置为middle来实现此功能，但它无法正常工作。

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

请任何帮助将不胜感激。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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>

Answer 2

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

尝试

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

删除默认边距。

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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>

Answer 5

保证金：0;会帮助你。

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

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