Allineamento del logo e del testo nella barra di navigazione

Voglio avere una barra di navigazione con un logo al suo interno ma mentre aggiungo il logo la linea non sembra a posto!Allineamento del logo e del testo nella barra di navigazione

Il problema è quando aggiungo la foto è come l'immagine e il testo non rimane nella stessa riga! non che la linea si spezzi, ma il testo scivola un po 'mentre non dovrebbe.

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>

fonte

2015-07-16 yukashima huksay

provare aggiungere 'line-height: 50px;' a 'nav # gnb'. dai un'occhiata qui per saperne di più sull'altezza della linea: https://css-tricks.com/almanac/properties/l/line-height/ –

Per cominciare abbiamo bisogno di risolvere il codice HTML.

Quindi guarda il tuo css il tuo <a> se stai usando il padding ecc. Devi renderlo un elemento a livello di blocco.

rimuovi l'altezza 50 px dal tuo nav che non è qualcosa che vuoi dare all'altezza. Usa invece la tua imbottitura di <a> per ottenere l'altezza desiderata che aiuta a rispondere.

Ma perché vogliamo riposare accanto all'immagine utilizzare inline-block

anche non utilizzare i CSS per definire l'altezza di un tag e la larghezza è necessario utilizzare i tag attributi in modo che il rendering avviene senza intoppi.

Inoltre è necessario utilizzare alt sulle immagini.

vostra immagine ha bisogno anche del seguente regola css:

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

modo che si trovi il modo in cui si desidera che al lato del vostro collegamento.

anche se questo è il logo del tuo sito non dovrebbe essere all'interno <nav>

Se si tratta di un'icona relativa al collegamento allora invece di utilizzare <img> uso 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>

fonte

2015-07-16 16:02:57 DCdaz

sei così incredibile! grazie davvero molto! il mio html e css è appena cresciuto ad uno stato più alto leggendo la tua risposta! grazie mille! (sry non sapevo che dovrei tenere premuto mentre premo invio) solo alcune domande! cos'è quello 0 in margine? hai scritto "margine: 0 10px;" Qual è la sua differenza con "margin: 10px" oh vedo i miei enters non fanno differenza! non importa :) –

@aran 'margin' è una scorciatoia per dichiarare i margini in tutte le direzioni. 'margine: 10px' significa che ci sarà un margine di 10 pixel su tutti i lati,' margine: 0 10px' significa che ci sarà un margine di '0' sul lato sinistro e destro ma un margine di' 10px' in alto e parte inferiore. inoltre, 'margin: 1px 2px 3px 4px' significa un margine' 1px' in basso, '2px' a sinistra,' 3px' in alto e '4px' a destra. –

vedere [la rete dello sviluppatore di mozilla] (https://developer.mozilla.org/en-US/docs/Web/CSS/margin) per ulteriori informazioni. –

Se si aggiungono vertical-align: middle sia al a.gnb e img#gnb_logo, che probabilmente risolvere il problema.

Prestare attenzione al riempimento superiore/inferiore del collegamento in modo che superi l'altezza di 50 px che è stata assegnata al contenitore principale.

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>

fonte

2015-07-16 15:58:47

è necessario rimuovere il margine.

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

Guarda la demo dal vivo.

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>

fonte

2015-07-16 16:00:23

First la tua classe a.gnb dovrebbe avere un blocco di visualizzazione se desideri eseguire il rendering del riempimento su un tag in linea come un tag "a". E l'altezza della tua linea deve essere di 22 px se vuoi farla stare in un contenitore di altezza 50px (14px + 14px padding superiore e inferiore + 22px line-height uguale a 50px) In secondo luogo, per rendere l'allineamento dell'immagine basta aggiungere vertical-align: middle al img#gnb_logo regola:

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

fonte

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>

fonte

2015-08-13 03:34:12 user5221746

Allineamento del logo e del testo nella barra di navigazione

risposta

Problemi correlati