Geek Answers Handbook

Alignment of logo and text in the navigation bar

I want to have a navigation bar with a logo inside it, but as the logo is added, the line does not look very good!

The problem is that I am adding pic as an image and the text does not stay on one line! not that the line breaks, but the text slides a little while it should not.

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>
+7
html css
source share
5 answers

First we need to sort your html.

Then look at your css your <a> if you are using propiska, etc. you need to make a block level element.

remove the 50px height from your navigator that you do not want to give height. Instead, use the indentation <a> to get the desired height, which helps with responsiveness.

But since we want it to sit next to your image, use inline-block

also do not use CSS to determine the height and width of the tag, you must use the attributes of the tags to render smoothly.

Also you need to use alt on the images.

Your image will also need the following css rules:

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

So that he sits the way you want, next to his link.

Also, if this is your site logo, it should not be inside <nav>

If it's an icon relative to the link, use background-image instead of using <img>

 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>
+3
source share

If you add vertical-align: middle to a.gnb and img#gnb_logo , this will probably fix your problem.

Pay attention to the top / bottom padding on your link so that it overflows the 50 pixel height that you assigned to the parent container.

 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>
+2
source share

First, your a.gnb class must have a display block if you want to display indents on an inline tag such as the "a" tag. And your line height should be 22px if you want it to fit into a container with a height of 50 pixels (14px + 14px padding top and bottom + 22px line-height equal to 50px) Secondly, to make the image align, just add vertical-align: middle to rule 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; }
+1
source share

You need to delete the field.

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

Check out the demo version.

 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>
0
source share
 <!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>
0
source share

More articles:


All Articles