Menu con immagine al centro

**AltF4** · 11-06-2015, 19:49

Ciao a tutti, avrei esigenza di creare un menu su un'unica riga che però contenga un'immagine al centro.

Solitamente faccio i menu con UL e LI, ma se inserisco l'immagine all'interno del tag LI, non riesce ad essere perfettamente centrata nella pagina in quanto tutto dipende dalle voci del menu a destra e a sinistra.

Questo è un piccolo esempio:

codice:

<UL>
<LI>VOCE 1</LI>
<LI>VOCE PIU LUNGA 2</LI>
<LI>VOCE BREVE 3</LI>
<LI>IMMAGINE</LI>
<LI>VOCE 4</LI>
<LI>VOCE MOLTO LUNGA 5</LI>
<LI>VOCE 6</LI>
</UL>

Spero di essere riuscito a spiegarmi al meglio!

**carlomarangoni** · 11-06-2015, 22:11

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
#menu {
    width: 980px;
    margin: 0px auto;
}
#primo,#terzo {
    float: left;
    height: auto;
    width: 31%;
}
#secondo {
    float: left;
    width: 300px;
    height: auto;
    width: 300px;
}
#clear {
    clear: both;
}
</style>
</head>

<body>
<div id="menu">
      <UL>
            <div id="primo" align="center">
                  <LI>VOCE 1</LI>
                  <LI>VOCE PIU LUNGA 2</LI>
                  <LI>VOCE BREVE 3</LI>
            </div>
            <div id="secondo" align="center">
                  <LI><img src="img.jpg" width="150" height="150" alt=""/></LI>
            </div>
            <div id="terzo" align="center">
                  <LI>VOCE 4</LI>
                  <LI>VOCE MOLTO LUNGA 5</LI>
                  <LI>VOCE 6</LI>
            </div>
      </UL>
      <div id="clear"></div>
</div>

</body>
</html>

Discussione: Menu con immagine al centro

Strumenti discussione

Ricerca discussione

Visualizza

Menu con immagine al centro

Permessi di invio