Visualizzazione risultati 1 fino 4 di 4

Discussione: Elementi centrati in orizzontale e verticale dentro TD

  1. #1
    phollia non è connesso Utente giovane
    Data registrazione
    05-02-2015
    Messaggi
    68

    Predefinito Elementi centrati in orizzontale e verticale dentro TD

    Sto cercando di costruire un tabellone della tombola.

    Ora quando metto i numeri dentro le caselle come testo, riesco a metterli centrati sia orizzontalmente che VERTICALMENTE, mentre se creo un tag < a > e voglio che sia mostrato come block e riempia l'intera cella, il testo si allinea in alto e non riesco a sistemarlo.

    Agendo sui margini riesco a spostarlo e visualizzarlo centrato, ma il blocco relativo non coincide più con la cella.

    https://phollia.altervista.org/labs/tabellone.php

    le due versioni realizzate (le celle colorate sono puramente dimostrative per simulare i numeri estratti) e questo lo stile applicato

    Codice:
    .tabellone { 
      margin: 50px auto; 
      text-align: center; 
    }
    .tabellone table { 
      border: medium solid #fff; 
      border-collapse: collapse; 
      margin: auto; 
      position: relative; 
    }
    .tabellone td { 
      border: medium solid #00f; 
      margin: 5px; 
      width: 60px; 
      height: 60px; 
      text-align: center; 
      font-size: 2em; 
      vertical-align: middle; 
      position: relative; 
    }
    .tabellone td > a { 
      text-decoration: none; 
      color: black; 
      width: 100%; 
      height: 100%; 
      display: block; 
      position: absolute; 
      top: 50%; 
      transform: translateY(-50%); 
    }
    Dove sbaglio?

  2. #2
    L'avatar di acsocmel
    acsocmel non è connesso Utente attivo
    Data registrazione
    03-07-2007
    Messaggi
    463

    Predefinito

    prova a semplificare

    Citazione Originalmente inviato da phollia Visualizza messaggio
    Codice:
    .tabellone { 
      margin: 50px auto; 
      text-align: center; 
    }
    .tabellone table { 
      border: medium solid #fff; 
      border-collapse: collapse; 
      margin: auto;
    }
    .tabellone td { 
      border: medium solid #00f; 
      width: 1.5em; 
      line-height: 1.5em; 
      text-align: center; 
      font-size: 2em; 
      vertical-align: middle;
    }
    .tabellone td > a { 
      text-decoration: none; 
      color: black; 
      display: block;
    }

  3. #3
    lucafornaciarifotografie non è connesso Utente AlterBlog
    Data registrazione
    25-01-2021
    Messaggi
    128

    Predefinito

    .tabellone td > a {
    text-decoration: none;
    color: black;
    /* width: 100%; */
    /* height: 100%; */
    /* display: block; */
    /* position: absolute; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    }
    Non ti servono tutti quegli attributi.

  4. #4
    phollia non è connesso Utente giovane
    Data registrazione
    05-02-2015
    Messaggi
    68

    Predefinito

    Scusate il ritardo.

    Grazie ad entrambi.
    Sfoltendo funziona. Grazie.

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •