中心內，容器

我想要垂直居中一個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

中心內，容器

回答

相關問題