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更改为：

Demo Fiddle

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

你正试图＆＃34; .navigation-menu＆＃34;你应该用于＆＃34; a＆＃34;锚标记 enter image description here

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 个答案:

Demo Fiddle