Question

我无法弄清楚如何垂直居中我的导航栏标题。

在下面的示例中（请参阅链接），我想降低“标题”，使其在粘性导航栏中垂直居中。

非常感谢任何帮助。

杰西

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: white;
  color: black;
}

button {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

button:focus {
  outline: 0;
}

nav {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;

  background-color: yellow;
  border-bottom: thin orange solid;
  text-align: center;
}

nav.stickyNav {
  position: fixed;
  top: 0;
  left: 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

nav ul li {
  display: inline;
}

nav ul li h1 {
  display: inline;
}

nav ul li h1.navTitle {
  /* What goes here to vertically center the title? */
}

nav ul li button {
  margin: 0;
  padding: 12px;
}

nav ul li button:focus {
  background-color: purple;
}

nav ul li button:active {
  background-color: green;
}

nav ul li button.navBtnLeft {
  float: left;
}

nav ul li button.navBtnRight {
  float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<body>
  <!-- Navbar -->
  <nav class="stickyNav">
    <ul>
      <!-- Left Button -->
      <li>
        <button class="navBtnLeft"><i class="fa fa-fw fa-2x fa-bars"></i></button>
      </li>

      <!-- Right Button -->
      <li>
        <button class="navBtnRight"><i class="fa fa-fw fa-2x fa-comment"></i></button>
      </li>

      <!-- Title -->
      <li>
        <h1 class="navTitle">Title</h1>
      </li>
    </ul>
  </nav>
</body>

Answer 1

.navTitle{
    line-height: 50px;
}

编辑：

如果您不想硬编码，可以使用表格单元格，以下是我的意思：https://jsfiddle.net/aw30L9bh/

Answer 2

您可以将导航设置为：table;然后使用垂直到中间：

.stickyNav li
{
   display:table-cell;
}

.titleClass
{
   vertical-align:middle;
}

我没有对此进行过测试，但在大多数情况下都应该可以使用。除非您必须使用旧版浏览器进行大量兼容性测试。

然后你可以像上面的回答一样硬编码。

如何相对于按钮垂直居中导航栏标题

2 个答案: