Выравнивание навигационного меню с логотипом

У меня могут возникнуть проблемы с базовым CSS, но даже если посмотреть на другие темы, я просто не могу избавиться от этой проблемы. Я понял, что вертикальное выравнивание работает только на встроенных элементах, что прекрасно. Но некоторые проблемы возникают, когда я фактически пытаюсь вертикально выровнять меню слева от своего логотипа. Я все еще думаю, что эта проблема вызвана плавающими элементами и свойством position, которые представляют для меня огромную проблему понимания, но я надеюсь, что кто-то может просто помочь мне справиться с этим, потому что это начинает немного раздражать.Выравнивание навигационного меню с логотипом

HTML:

<body> 
<div id="container"> 
    <div id="logo"> 
    <img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png" 
    </div> 
    <div id="nav-container"> 
    <ul id="navbar"> 
     <li><a href="#">One</a></li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Three</a></li> 
     <li><a href="#">Four</a></li> 
     <li><a href="#">Five</a></li> 
    </div> 

    </div> 
</body>

CSS:

body { 
    margin: 0; 
    padding; 0; 
} 
#container { 
    margin: auto; 
    width: 960px; 
} 
#nav-container { 
    margin: 0; 
    width: 750px; 
    float: right; 
    border:1px black dashed; 
    height: 200px; 
} 
ul#navbar { 
    margin: 20px; 
    padding: 0; 
    list-style: none; 
} 
ul#navbar > li { 
    display: inline; 
    vertical-align: bottom; 
} 
ul#navbar > li > a { 
    padding: 5px; 
    display: block; 
    text-decoration: none; 
    font-size: 25px; 
    text-align: center; 
    float: left; 
    border-right: 1px black solid; 
} 
ul#navbar > li > a:hover { 
    background-color: RoyalBlue; 
} 
ul#navbar > li > a > p{ 
    vertical-align: bottom; 
}

Моя ручка: http://codepen.io/Rej/pen/egKYEa

источник

2017-02-04 Rejuvenation

Вы хотите выровнять логотип с элементами меню или контейнером '# nav-container'? –

Прежде всего есть некоторые изменения должны быть сделаны в HTML и CSS

1- тег изображения img нет т закрыт и т.д. отсутствует />

2- элементы, которые нуждаются плавающие в навигации является li с не a с так я изменил его в CSS.

3- логотип контейнер div тега, который является встроенным тегом, поэтому я добавил display:inline-block

4- логотип изображение, содержащее пустое белое пространство, сделать его не подходит для тестирования я заменить его через placeholder

5 - для выравнивания меню можно использовать SUDO элемент after и vertical-align:middle

проверки демо ниже

body { 
 
    margin: 0; 
 
    padding; 0; 
 
} 
 
#container { 
 
    margin: auto; 
 
    width: 960px; 
 
} 
 
#nav-container { 
 
    margin: 0; 
 
    width: 750px; 
 
    float: right; 
 
    border:1px black dashed; 
 
    height: 200px; 
 
} 
 
ul#navbar { 
 
    margin: 20px; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
ul#navbar:after{ 
 
    content:''; 
 
    display:table; 
 
    clear:both; 
 
} 
 
ul#navbar > li { 
 
    display: inline; 
 
    vertical-align: bottom; 
 
    float: left; 
 
    
 
} 
 
ul#navbar > li > a { 
 
    padding: 5px; 
 
    display: block; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    text-align: center; 
 
    border-right: 1px black solid; 
 
} 
 
ul#navbar > li > a:hover { 
 
    background-color: RoyalBlue; 
 
} 
 
ul#navbar > li > a > p{ 
 
    vertical-align: bottom; 
 
} 
 
#logo{ 
 
    display:inline-block; 
 
} 
 
div#nav-container:after { 
 
    content: ''; 
 
    height: 100%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<body> 
 
    <div id="container"> 
 
    <div id="logo"> 
 
     <img src="https://placehold.it/200x200"/> 
 
    </div> 
 
    <div id="nav-container"> 
 
     <ul id="navbar"> 
 
     <li><a href="#">One</a></li> 
 
     <li><a href="#">Two</a></li> 
 
     <li><a href="#">Three</a></li> 
 
     <li><a href="#">Four</a></li> 
 
     <li><a href="#">Five</a></li> 
 
    </div> 
 
    
 
     </div> 
 
</body>

Пожалуйста, оставьте отзыв, если я избегаю-понимаю ваш вопрос

источник

2017-02-04 13:53:19

Ну, я не знал о вещи-заполнителе, но, полагаю, я обнаружил новую вещь благодаря вам! В любом случае, я выполнил фрагмент кода, который вы предоставили мне, но я думаю, что, возможно, я немного исказил объяснение. Я фактически требую, чтобы меню само по вертикали выровнялось с логотипом. , т. Е. 200px-заголовок с логотипом высотой 200 пикселей. Мое меню должно быть справа на средней высоте между базовой линией логотипа и верхней линией логотипа. Я просто не знаю, как это достичь. – Rejuvenation

Хорошо, отлично!Я отредактирую свой ответ –

проверить отредактированный ответ –

надежда, что поможет, я Pratically изменил положение изображения, чтобы быть после списка, как вы хотите Вот некоторые CSS припадки ваш код должен:

body { 
    margin: 0; 
    padding; 0; 
} 
#container { 
    margin: auto; 
    width: 960px; 
} 
#nav-container { 
    margin: 0; 
    float: left; 
    border:1px black dashed; 
    height: 200px; 
} 

ul#navbar { 
    margin: 20px; 
    padding: 0; 
    list-style: none; 
} 
ul#navbar > li { 

    vertical-align: bottom; 
} 
ul#navbar > li > a { 
    padding: 5px; 
    text-decoration: none; 
    font-size: 25px; 
    text-align: center; 
    float: left; 
} 
ul#navbar > li > a:hover { 
    background-color: RoyalBlue; 
} 
ul#navbar > li > a > p{ 
    vertical-align: bottom; 
}

и у вас есть какие-то проблемы, HTML, так после того, как их исправить это выглядит следующим образом:

<div id="container"> 

    <div id="nav-container"> 
    <ul id="navbar"> 
     <li><a href="#">One</a></li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Three</a></li> 
     <li><a href="#">Four</a></li> 
     <li><a href="#">Five</a></li> 
    </ul> 
    </div> 
    <div id="logo"> 
    <img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png"> 
    </div> 

    </div>

источник

2017-02-04 14:12:38

Это было не так мой запрос! Мне действительно нравится позиция самих элементов! Мне просто нужно, чтобы меню правильно выравнивалось по вертикали в заголовке – Rejuvenation

Выравнивание навигационного меню с логотипом

ответ

Смежные вопросы