中心内，容器

我想要垂直居中一个div为我的标志我的导航水箱内垂直股利。我已经研究过其他话题，但没有一个给我提供了一个很好的解决方案。你们任何人都可以给我一个很好的解决方案响应中心内，容器

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

的目标是让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>

来源

2016-08-15 BPrepper

可能重复[如何垂直居中所有浏览器的div？]（http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers） – Aaron

看着那些人没有解决我的问题。没有垂直居中并且没有工作。 @Aaron +也没有反应。 – BPrepper

Flexbox，就可以让你垂直居中项目以及导航和标志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>

来源

2016-08-15 21:05:30 Aaron

修复了间距，但它并未将我的徽标和导航垂直对齐，完全位于中心。 – BPrepper

如果您运行的代码片断是的话，你还有什么其他的CSS在您的网站可能被影响的头项目？ – Aaron

Bootstrap。忘了那个。 – BPrepper

使用绝对定位。

把最高位置50％（与容器相关），然后你回过来50％（与元素本身有关），最后因为'最高50％'从元素的开始处开始，所以你需要返回它的一半来获得你所需要的。

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

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

来源

2016-08-15 21:09:50

使用vertical-align:middle和display: table-cell

.logo { 
    height: 58px; 
    vertical-align: middle; 
    display: table-cell; 
} 

.nav{ 
    vertical-align: middle; 
    display: table-cell; 
    height: 58px; 
    width: 20px; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
}

https://jsfiddle.net/b91x5q5h/1/

来源

2016-08-15 21:17:37

可以尝试：

.logo, 
.nav { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

或者你可以在沟头的高度，并使用顶部/底部填充，标志可能比你的资产净值高但应垂直居中。然后，只需将一些顶部填充添加到导航栏中，直至其垂直居中。

来源

2016-08-16 02:50:36 Ben

中心内，容器

回答

相关问题