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?
