垂直對齊浮動元素

Question

我有一個導航，里面有兩個div，一個用於徽標，另一個用於菜單。 徽標div浮動到左邊。 所以，它的父母的高度現在與徽標div相同。 但是，浮動的菜單div位於頂部。 我想把它對齊在中間。 我怎么能這樣做？ 請幫我...

我的代碼如下：

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <div class="navigation clearfix">
        <div class="logo">
            <img src="logo.png" />
        </div>
        <div class="navigation-menu">
            <a>HOME</a>
            <a>HOME</a>
            <a>HOME</a>
            <a>HOME</a>
            <a>HOME</a>
        </div>
    </div>
    <script src="JavaScript.js"></script>
</body>
</html>

CSS

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

p {
    margin: 0;
}

img {
    display: block;
}

.navigation {
    background-color: yellow;
}

.logo {
    float:left;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.navigation-menu {
    float:right;
    background-color:red;
}

而且，這是小提琴......

http://jsfiddle.net/ZghVk/

Answer 1

如果沒有定義固定高度，您可以更改布局以使用display:table以便於垂直對齊。

嘗試將CSS更改為：

演示小提琴

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
}
p {
    margin: 0;
}
img {
    display: block;
}
.navigation {
    background-color: yellow;
    display:table;
    width:100%;
}
.logo {
    display:table-cell;
}
.navigation-menu {
    text-align:left;
    display:table-cell;
    text-align:right;
    vertical-align:middle;
}
.navigation-menu a{
    background-color:red;    
    float:right;
    padding:0 5px;
}

Answer 2

您可以設置line-height ：

的jsfiddle

.navigation-menu {
    float:right;
    background-color:red;
    line-height:120px;
}

Answer 3

這是你必須要做的

.navigation-menu {
border:1px solid black;
background-color:red;
margin-left:40px;
}

.navigation-menu a{
margin-left:20px;
  }

你試圖“.navigation-menu”你應該用於“a”錨標簽 在此輸入圖像描述

Answer 4

嘗試這個：

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
}
p {
    margin: 0;
}
img {
    display: block;
}
.navigation {
    background-color: yellow;
    display:table;
    width:100%;
}
.logo {
    display:table-cell;
}
.navigation-menu {
    text-align:left;
    display:table-cell;
    text-align:right;
    vertical-align:middle;
}
.navigation-menu a{
    background-color:red;    
    float:right;
    padding:0 5px;
}

希望能幫助到你！ :)

垂直對齊浮動元素

問題描述

4 個解決方案

解決方案1
2 2014-05-07 09:29:51

演示小提琴

解決方案2
0 2014-05-07 09:30:42

解決方案3
0 2014-05-07 09:34:19

解決方案4
0

垂直對齊浮動元素

問題描述

4 個解決方案

解決方案1 2 2014-05-07 09:29:51

演示小提琴

解決方案2 0 2014-05-07 09:30:42

解決方案3 0 2014-05-07 09:34:19

解決方案4 0

解決方案1
2 2014-05-07 09:29:51

解決方案2
0 2014-05-07 09:30:42

解決方案3
0 2014-05-07 09:34:19

解決方案4
0