Добавление отступов вызывает проблемы вертикального выравнивания

У меня есть заголовок, который содержит два hrefs слева и навигационную панель справа. У меня проблемы с тем, чтобы все было вертикально выровнено по середине. Я рассмотрел миллион вопросов по вопросам вертикального выравнивания, но ничто не устранило мою проблему.Добавление отступов вызывает проблемы вертикального выравнивания

Если я добавляю прокладку к метке меню, то hrefs больше не выравниваются по вертикали по середине. Если заполнение для меню равно 0, все выровнено в порядке. Требуется ли navbar высота и ширина?

.menu { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: #19c589; 
 
    display: block; 
 
    float: right; 
 
    margin-right: 100px; 
 
    border: red 3px solid; 
 
    padding: 10px 0; 
 
    vertical-align: middle; 
 
} 
 

 
#header nav{ 
 
    display:inline; 
 
} 
 
#header { 
 
    background: gray; 
 
    padding: 28px 0 26px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1000; 
 
    width: 100%; 
 

 
} 
 
a[href="#top"] { 
 
    margin-left:100px; 
 
    margin-right:50px; 
 
    vertical-align: middle; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
} 
 
a img{ 
 
    vertical-align:middle; 
 
} 
 
a, a:visited{ 
 
    color: white; 
 
}

<body> 
 
    <header id="header"> 
 
     <a href="#top">Test</a> 
 
     <a href=""> 
 
      <img src="" alt="img" height="24" width="24"> 
 
     </a> 
 
     <nav id="navbar"> 
 
     \t <label class="menu">Menu</label> 
 
     </nav> 
 
    </header> 
 

 
</body> 
 
</html>

источник

2016-05-26 eric

Что должно быть согласовано с чем? –

Все элементы должны располагаться в линии со смещением по вертикали. Метка меню не находится в этой строке с двумя hrefs. – eric

отредактирован скрипку Это должно работать для вас https://jsfiddle.net/5f3pbg8b/13/

Примечание: Вы не можете использовать vertical-align: middle; с перемещаемым элементом, это происходит потому, что плавали элементы выравниваются по верхней части, вы можете подробнее об этом здесь https://www.w3.org/TR/CSS21/visuren.html#floats

.menu { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-decoration: none; 
    color: #fff; 
    background: #19c589; 
    position: absolute;/* new */ 
    right: 0;/* new */ 
    margin-right: 100px; 
    border: red 3px solid; 
    padding: 10px 0; 
    margin-top: -10px;/* new */ 
}

источник

2016-05-26 22:31:07

Благодарим вас за помощь. Я не знал, что о поплавках, поэтому я должен буду читать. Есть ли способ получить меню с правой стороны? Или это просто потребует добавления поля? – eric

@eric вы посмотрели на скрипку? Он перемещается вправо. –

О, лапка, неправильная скрипка дайте мне минуту, чтобы исправить –

Добавление отступов вызывает проблемы вертикального выравнивания

ответ

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