Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it L'avatar di abellos
    Registrato dal
    Feb 2002
    Messaggi
    266

    Allineare verticalmente un immagine

    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
    Da un grande potere derivano grandi responsabilità

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,801
    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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.