Выравнивание логотипа и текста в навигационной панели

Я хочу, чтобы в нем была панель навигации с логотипом, но когда я добавляю логотип, линия выглядит не очень хорошо!Выравнивание логотипа и текста в навигационной панели

Проблема заключается в том, что я добавляю изображение, подобное картинке, и текст не остается в одной строке! не то, что линия ломается, но текст скользит немного, пока это не должно.

body { 
 
    background-color: #C8F1BA; 
 
    margin: 0px; 
 
} 
 
div#gnb_bg { 
 
    margin: 0px; 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
    border-right: 10px solid black; 
 
} 
 
a.gnb { 
 
    background-color: #99FF33; 
 
    text-decoration: none; 
 
    font-size: 26px; 
 
    border-right: 1px solid #448811; 
 
    padding-right: 2.5%; 
 
    padding-left: 2.5%; 
 
    padding-top: 14px; 
 
    padding-bottom: 14px; 
 
    margin: 0px; 
 
} 
 
img#gnb_logo { 
 
    height: 30px; 
 
    margin: 10px; 
 
} 
 
nav#gnb { 
 
    text-align: center; 
 
    background-color: #99FF33; 
 
    height: 50px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <nav id="gnb" role="navigation" aria-label="Global Navigation"> 
 
    <div id="gnb_bg"> 
 
     <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a> 
 
     <img id="gnb_logo" src="../images/logo.gif" /> 
 
    </div> 
 
    </nav> 
 
</body>

источник

2015-07-16 yukashima huksay

попробовать добавить 'высоту строки: 50px;' в 'нав # gnb'. возьмите здесь, чтобы узнать больше о линии-высоте: https://css-tricks.com/almanac/properties/l/line-height/ –

Для начала нам нужно разобраться в вашей HTML.

Затем посмотрите на свой css свой <a>, если вы используете прописку и т. Д. Вам нужно сделать элемент уровня блока.

удалите высоту 50px с вашего навигатора, что вы не хотите придавать высоту. Вместо этого используйте ваш отстут <a>, чтобы получить желаемую высоту, которая помогает с отзывчивым.

Но так как мы хотим, чтобы сидеть рядом с вашим изображением использовать inline-block

также не использовать CSS, чтобы определить высоту тега и ширину, вы должны использовать тег атрибуты, так что рендеринг происходит плавно.

Также вы должны использовать alt на изображениях.

вашего изображения также необходимо следующее правило CSS-х:

img#gnb_logo { 
vertical-align:middle; 
margin:0 10px; 
}

Так что он сидит так, как вы хотите его рядом с вашей ссылкой.

Кроме того, если это логотип вашего сайта не должно быть внутри <nav>

Если это значок по отношению к линии, то вместо того, чтобы использовать <img> использование background-image

body { 
 
    background-color: #C8F1BA; 
 
    margin: 0px; 
 
} 
 
ul, 
 
li { 
 
    list-style: none; 
 
} 
 
div#gnb_bg { 
 
    margin: 0px; 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
    border-right: 10px solid black; 
 
} 
 
a.gnb { 
 
    background-color: #99FF33; 
 
    text-decoration: none; 
 
    font-size: 26px; 
 
    border-right: 1px solid #448811; 
 
    padding-right: 2.5%; 
 
    padding-left: 2.5%; 
 
    padding-top: 14px; 
 
    padding-bottom: 14px; 
 
    margin: 0px; 
 
    display: inline-block; 
 
} 
 
img#gnb_logo { 
 
    vertical-align:middle; 
 
    margin:0 10px; 
 
} 
 
nav#gnb { 
 
    text-align: center; 
 
    background-color: #99FF33; 
 
}

<header> 
 
    <nav id="gnb" role="navigation" aria-label="Global Navigation"> 
 
    <ul id="gnb_bg"> 
 
     <li> 
 
     <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a> 
 
     <img id="gnb_logo" src="../images/logo.gif" height="30" alt="GNB Logo" /> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

источник

2015-07-16 16:02:57 DCdaz

вы так удивительны! Большое вам спасибо! Мое html и css просто выросли к более высокому состоянию, читающему ваш ответ! Большое вам спасибо! (sry i did not знаю, я должен держать shift, как я нажимаю ввод) всего несколько вопросов! Что это такое 0 в поле? вы написали «margin: 0 10px;» в чем его отличие от «margin: 10px» О, я вижу, что мои входы не имеют никакого значения! неважно :) –

@aran 'margin' является сокращением для объявления полей во всех направлениях. «margin: 10px» означает, что на всех сторонах будет 10 пикселов, «margin: 0 10px» означает, что на левой и правой стороне будет поле «0», но поле «10px» сверху и дно. Кроме того, 'margin: 1px 2px 3px 4px' означает« 1px »в нижней части,' 2px' слева, '3px' сверху и' 4px' справа. –

см. [Сеть разработчика mozilla] (https://developer.mozilla.org/en-US/docs/Web/CSS/margin) для получения дополнительной информации. –

Если добавить vertical-align: middle к обоим a.gnb и img#gnb_logo, что, вероятно, исправить вашу проблему.

Обратите внимание на верхнюю/нижнюю прокладку на вашей ссылке, чтобы она переполняла высоту 50 пикселей, которую вы назначили родительскому контейнеру.

body { 
 
    background-color: #C8F1BA; 
 
    margin: 0px; 
 
} 
 
div#gnb_bg { 
 
    margin: 0px; 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
    border-right: 10px solid black; 
 
} 
 
a.gnb { 
 
    background-color: #99FF33; 
 
    text-decoration: none; 
 
    font-size: 26px; 
 
    border-right: 1px solid #448811; 
 
    padding-right: 2.5%; 
 
    padding-left: 2.5%; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    margin: 0px; 
 
    vertical-align: middle; 
 
} 
 
img#gnb_logo { 
 
    height: 30px; 
 
    margin: 10px; 
 
    vertical-align: middle; 
 
} 
 
nav#gnb { 
 
    text-align: center; 
 
    background-color: #99FF33; 
 
    height: 50px; 
 
}

<nav id="gnb" role="navigation" aria-label="Global Navigation"> 
 
    <div id="gnb_bg"> 
 
    <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a> 
 
    <img id="gnb_logo" src="http://placehold.it/100x50" /> 
 
    </div> 
 
</nav>

источник

2015-07-16 15:58:47

Вы должны удалить запас.

img#gnb_logo{ 
height:30px; 
margin:0px; 
}

Проверьте демоверсию.

body { 
 
background-color: #C8F1BA; 
 
margin: 0px; 
 
} 
 

 
#gnb{ 
 
    padding:10px; 
 
} 
 
div#gnb_bg{ 
 
margin:0px; 
 
padding-top:0px; 
 
padding-bottom:0px; 
 
border-right:10px solid black; 
 
} 
 
a.gnb{ 
 
background-color: #99FF33; 
 
text-decoration: none; 
 
font-size:26px; 
 
border-right:1px solid #448811; 
 
padding-right:2.5%; 
 
padding-left:2.5%; 
 
padding-top:14px; 
 
padding-bottom:14px; 
 
margin:0px; 
 
} 
 
img#gnb_logo{ 
 
height:30px; 
 
} 
 
nav#gnb{ 
 
text-align:center; 
 
background-color: #99FF33; 
 
height: 50px; 
 
}

<nav id="gnb" role="navigation" aria-label="Global Navigation"> 
 
    <div id="gnb_bg"> 
 
    <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a> 
 
    <img id="gnb_logo" src="http://placehold.it/100x50"/> 
 
    </div> 
 
</nav>

источник

2015-07-16 16:00:23

Первый ваш класс a.gnb должен иметь блок отображения, если вы хотите отображать отступы на встроенном теге, таком как тег «a». И ваша высота линии должна быть 22px, если вы хотите, чтобы она вписывалась в контейнер высотой 50 пикселей (14px + 14px padding top и bottom + 22px line-height равным 50px) Во-вторых, чтобы выравнивание изображения просто добавило vertical-align: middle к img#gnb_logo правило:

body { 
    background-color: #C8F1BA; 
    margin: 0px; 
    padding: 0px; 
} 
div#gnb_bg{ 
    margin:0px; 
    padding-top:0px; 
    padding-bottom:0px; 
    border-right:10px solid black; 
} 
a.gnb{ 
    background-color: #99FF33; 
    text-decoration: none; 
    font-size:26px; 
    border-right:1px solid #448811; 
    padding-right:2.5%; 
    padding-left:2.5%; 
    padding-top:14px; 
    padding-bottom:14px; 
    margin:0px; 
    line-height: 22px; 
    display: inline-block; 
} 
img#gnb_logo{ 
    height:30px; 
    margin:10px; 
    vertical-align: middle; 
} 
nav#gnb{ 
    text-align:center; 
    background-color: #99FF33; 
    height: 50px; 
}

источник

2015-07-16 16:07:29

<!DOCTYPE html> 
<html> 

<head> 
<style> 
body { 
    background-color: #C8F1BA; 
    margin: 0px; 
} 

a.gnb { 
    text-decoration: none; 
    font-size: 26px; 
    border-right: 1px solid black; 
    vertical-align: middle; 
    padding-right: 1%; 
    padding-left: .2%; 
    padding-top: 5px; 
    padding-bottom: 5px; 
} 
img#gnb_logo { 
    height: 30px; 
vertical-align: middle; 
margin:5px 0px; 

} 
nav#gnb { 
    text-align: center; 
    background-color: #99FF33; 
    height: 40px; 
} 
</style> 
</head> 

<body> 
    <nav id="gnb" role="navigation" aria-label="Global Navigation"> 
    <div id="gnb_bg"> 
     <img id="gnb_logo" src="http://placehold.it/100x50" /> 
     <a class="gnb" href="../feedbacks/feedbacks.html">Website</a> 
    </div> 
    </nav> 
</body>

источник

2015-08-13 03:34:12 user5221746

Выравнивание логотипа и текста в навигационной панели

ответ

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