Allineare verticalmente un immagine

**abellos** · 23-10-2020, 13:15

Ciao,
non sono molto esperto di css ma sto cercando di fare un sito web responsive, per ora vorrei allineare verticalmente l'immagine che ho con gli altri collegamenti/pulsanti del menu, ma non ci riesco
Le mie pagine sono index.htm

codice:

<!DOCTYPE html>
<html>

<head>
    <title>test pagina responsive</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link rel="stylesheet" href="style.css" media="all">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src=""></script>
</head>

<body>
    <div id="wrapper">
        <div id="header">
            
            <div id="mainmenu">                
                <ul>
                    <li><a href=""><img src="logo.png" id="logo"></a></li>
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div> <!-- #mainmenu -->
        </div>
        <div id="main" class="bordi">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
            standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make
            a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
            of Lorem Ipsum.
        </div>
        <div id="footer">
            <p>Copyright &copy; 2004-2020 <a href="#"> Sia srl</a></p>
        </div>
    </div>
</body>

</html>

e lo stile in style.css

codice:

body 
{
margin:            0;
padding:        0;
background:        #eb8e15;


}

@media screen and (max-width: 320px)
{
body {background:#FF8000;}
}

@media screen and (min-width: 321px) and (max-width: 481px)
{
body {background:#bbeb15; }
}


@media screen and (min-width: 481px) and (max-width: 769px)
{
body {background:#15ebde; }
}

@media screen and (min-width: 769px) and (max-width: 1024px)
{
body {background:#eb15e3; }
}

.bordi{
    border: red solid 3px;
    
}

a             {color: #000;text-decoration: none;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
a:hover     {color: #21aabd;}
a:active    {outline: none;}

#wrapper     {width: 960px;margin: 0 auto;background:#fff;}
#header     {width: 920px;float: inline-start;padding: 20px 20px 20px 20px; background:#21aabd;} 
#mainmenu    {width: 100%;float: left;background: #888;}
#main         {width: 920px;float: left;padding: 20px 20px 20px 20px;}
#footer        {width: 920px;float: left;padding: 30px 20px 10px 20px;background:#666;}

#divlogo       {vertical-align: middle;}

#logo {width:50%;height:50%;margin-bottom:10px;}


/*** Menu ***/
#mainmenu ul         {margin: 0px 0 0px 0px;float:left;width:100%; list-style: none;}
#mainmenu ul li     {float: left;margin: 0 0px 0 0;position: relative;}
#mainmenu a         {color: #fff; display: block;font: 14px;padding: 14px 20px;font-family: oswald; text-transform:uppercase;}
#mainmenu a:hover {background:#666;}

/*** Footer ***/
#footer                 {color: #fff;}
#footer a                 {font: 14px;}

Ho provato anche a mettere un div davanti al tag UL ma non riesco comunque ad allinearlo, mi potete dare una mano? grazie in anticipo

**KillerWorm** · 24-10-2020, 00:37

Ciao, in generale puoi usare flex box applicando display:flex e align-items:center al genitore. Nel tuo caso però, per ottenere un risultato soddisfacente, dovresti applicare flex su tutti gli elementi coinvolti nella gerarchia, cioè <ul> <li> e <a>.

Prova a rimuovere i vari display:block e float:left per tali elementi, nonché rimuovere quel margin-bottom:10px che hai messo al logo (presumo che disturbi il centraggio) e applicare quindi qualcosa del genere:

codice:

#mainmenu ul,
#mainmenu li {
   display: flex;
   align-items: stretch;
}
#mainmenu a {
   display: flex;
   align-items: center;
}

Fai sapere.

Discussione: Allineare verticalmente un immagine

Strumenti discussione

Ricerca discussione

Visualizza

Allineare verticalmente un immagine

Permessi di invio