Het overkomt me wel eens meer en vandaag is weer zo'n dag.
Ik heb een tabel opgemaakt en ineens kom je erachter dat de tekst niet overal verticaal exact in het midden is uitgelijnd. Zelf probeer ik dat dan te corrigeren door de line-height te wijzigen of een padding-top van 1 pixel toe te passen en dat soort grappen. Kortom, niet echt handig. Dus ik dacht, laat ik eens om advies vragen. Wat is nu de juiste manier om tekst verticaal in het midden uitgelijnd te krijgen?
Stel we hebben 2 <td>'s naast elkaar staan met tekst. Stel ik wil dat die td's een hoogte hebben van 50 pixels. In de linker <td> staat tekst met een lettergrootte van 16 pixels. In de rechter <td> staat text met een lettergrootte van 11 pixels. Beide <td>'s moeten 50 pixels hoog zijn en de text moet verticaal precies in het midden staan. Daarnaast wil ik dat de text in beide <td>'s een line-height heeft van 20 pixels. Hoe pak ik dit nu het beste aan?
<table>
<tr>
<td id="links">
Dit is een sample tekst!
</td>
<td id="rechts">
Dit is een sample tekst!
</td>
</table>
// css code
#links {
}
#rechts {
}
Wie heeft tips? Vertical-align: middle werkt niet. Graag hoor ik hoe jullie dat doen.
[offtopic]
Dit voorbeeldje is toevallig met een tabel en 2 <td>'s, maar het kan bijvoorbeeld ook een <div> zijn. De vraag is, hoe krijg ik mijn tekst perfect verticaal gecentreerd in een parent element?
[/offtopic]
