+ Rispondi al messaggio
Visualizzazione dei risultati da 1 a 4 su 4

CSS allineamento verticale

  1. #1
    BennyB non è in linea Scolaretto
    La question è annosa, e ci sono decine di articoli sul WEB. Però, io ho realizzato un semplice menu (con qualche animazione, ma questo esula dalla questione), in cui i testi nei tags a non si allineano verticalmente.
    Riporto le parti principali:
    HTML
    codice HTML:
    <!DOCTYPE html>
      <html lang="EN">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>MENU animato</title>
    
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
        <link rel="stylesheet" href="style_studio.css">
      </head>
      <body>
      <nav>
        <div class="box cf">
          <ul>
            <li class="item2">
              <a class="home" href="#">HOME</a>
            </li>
            <li class="item2">
              <a class="dato" href="#">Dato selezionato</a>
            </li>
          </ul>
        </div>
      </nav>
    
      </body>
    </html>
    CSS
    codice HTML:
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body{
      font-family: "Roboto", sans-serif;
      font-weight: 500;
    }
    .cf:before,
    .cf:after {
      content: " ";
      display: table;
    }
    .cf:after {
      clear: both;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    .box {
      margin-left: auto;
      margin-right: auto;
      width: 70%;
    }
    .box ul {
      margin: 0;
        list-style: none;
        background: #f2f2f2;
    }
    .box ul li {
        margin: 0;
        float: left;
        position: relative;
        border: 1px solid black;
        height: 4rem;
    }
    .box ul li a {
        display: block;
        height: 100%;
        vertical-align: middle;
        padding: 1em 3em;
        color: #333;
        /* border: 4px solid #f2f2f2; */
        z-index: 100;
        overflow: hidden;
        transition: background-color, border 100ms ease;
        /* transition: background-color 100ms ease, box-shadow 150ms ease; */
        transition-timing-function: cubic-bezier(0.57, 0.21, 0.69, 3.25);
    }
    .box ul li a.home {
      background: #1681d2;
    }
    Per quanto concerne la classe dati, c'è una pseudo-classe before, ma non ha nulla a che vedere con il fatto che il testo nei tag a non si allineano verticalmente (l'istruzione vertical-align: middle; non ha effetto). Qualcuno sa spiegarmi perché?

  2. #2
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Secondo me, il problema è che vertical-align non si applica agli elementi che hai messo sulla pagina.
    Vedi la documentazione per le annotazioni al riguardo.

    Ciao!
    ℹ️ Leggi di più su _alka_ ...

  3. #3
    BennyB non è in linea Scolaretto
    Sì, effettivamente è così. Ho risolto usando height nel parent e line-height nel child (tag a).
    Va beh, serve per imparare.

    Grazie.

  4. #4
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Quote Originariamente inviato da BennyB Visualizza il messaggio
    Va beh, serve per imparare.
    Sapessi quante volte ci sono passato... non per niente, il Web è pieno di "meme" a riguardo.
    ℹ️ Leggi di più su _alka_ ...

+ Rispondi al messaggio

Potrebbero interessarti anche ...

  1. Allineamento verticale label
    Da licetinsanire nel forum Visual Basic 6
    Risposte: 2
    Ultimo Post: 07-05-2009, 17:52
  2. Allineamento verticale con XHTML 1.1
    Da Gandalfrank nel forum HTML, CSS e JavaScript
    Risposte: 5
    Ultimo Post: 06-01-2009, 18:29
  3. Allineamento verticale Colonne nelle email
    Da TorrediPisa nel forum Visual Basic 6
    Risposte: 2
    Ultimo Post: 16-06-2008, 12:02
  4. allineamento codice
    Da aldodellacasa nel forum Altri linguaggi e strumenti
    Risposte: 2
    Ultimo Post: 01-04-2007, 10:44
  5. allineamento CSS
    Da Abula nel forum HTML, CSS e JavaScript
    Risposte: 3
    Ultimo Post: 09-01-2005, 16:57