Question

我正在尝试将导航标题中的标识垂直居中。我已经研究了stackoverflow上的其他主题，但没有一个给我一个很好的解决方案。你们中的任何人都可以给我一个很好的响应解决方案

查看：How to vertically center a div for all browsers?并没有解决我的问题。

目标是让左侧的徽标的div类垂直居中，右侧的 nav 的div类垂直居中。

摘录：

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
    vertical-align: baseline;
    outline: none;
}

#header {
    background: #00968B;
    height: 58px;
}

.logo {
    height: 58px;
}

<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="header">
  <div class="container">
    <div class="logo">
        logo
    </div>
    <div class="nav">
    </div>
  </div>
</div>
</body>
</html>

Answer 1

Flexbox允许您将项目垂直居中align-items: center;并在导航和徽标justify-content: space-between;之间添加间距，添加flex-flow: row wrap;将允许项目在标题项触摸后换行。

#header {
  background: #00968B;
  height: 58px;
}
.logo {
  height: 58px;
  background: orange;
}
.nav {
  width: 30%;
  background: yellow;
  height: 30px;
}

.container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}

<div id="header">
  <div class="container">
    <div class="logo">
      logo
    </div>
    <div class="nav">
      nav
    </div>
  </div>
</div>

Answer 2

使用绝对定位。

将顶部位置设为50％（与容器相关），然后转换回50％（与元素本身相关），最后一个因为前50％＆＃39;从元素的开头开始，所以你需要返回一半来获得你需要的东西。

＆＃13;

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
    vertical-align: baseline;
    outline: none;
}

#header {
    background: #00968B;
    height: 58px;
    position: relative;
}

.vcenter {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
 }

.logo {
    left: 10px;
}

.nav {
    right: 10px;
 }

＆＃13;

<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="header">
  <div class="container">
    <div class="logo vcenter">
        logo
    </div>
    <div class="nav vcenter">
        nav
    </div>
  </div>
</div>
</body>
</html>

＆＃13;

中心div垂直在容器内

2 个答案: