вертикально выровненный плавающий элемент

Question

вертикально выровненный плавающий элемент

0

У меня есть навигационная система, внутри которой у меня есть два 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/

user3611470 07 май 2014, в 12:05

Источник

Теги:

html

css

html5

css3

4 ответа

Ещё вопросы

SW4 · Answer 1 · 2014-05-07T08-23-00.000Z

Не определяя фиксированную высоту, вы можете изменить макет для использования 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;
}

Manjuboyz · Answer 2 · 2014-05-07T08-29-00.000Z

Это то, что вам нужно сделать

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

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

вы пытаетесь ".navigation-menu" вы должны использовать для "a" тега привязки

user2424370 · Answer 3 · 2014-05-07T07-51-00.000Z

Попробуй это:

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

Надеюсь, поможет! :)

Albzi · Answer 4 · 2014-05-07T07-03-00.000Z

Вы можете установить line-height:

JSFiddle

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