De PHPhulp kroeg
text verticaal uitlijnen in midden
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?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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 {
}
<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?
Gewijzigd op 26/03/2013 16:54:37 door Ozzie PHP
Hier (Opera 11) werkt dat perfect:
http://codepen.io/anon/pen/gqmDv
Ik heb het voorbeeld gewijzigd met een divje. Vertical-align staat op middle, maar de tekst staat niet in het midden:
http://codepen.io/anon/pen/Gzbnx
Ik ga weer ff aan de slag. Misschien dat ik hier straks nog een vraag stel, maar hopelijk is het niet nodig!
Spamlink weggehaald, gelieve alleen linkjes met relevantie tot het topic te plaatsen[/modedit]
Gewijzigd op 06/12/2013 09:05:28 door Wouter J
Is er iets wat hen tegen houdt om dat voor eens en altijd op te lossen?
Wat wel leuk is: De nieuwe CSS3 flexbox module die dit heel makkelijk maakt, dus zoals Kris zegt het voor eens en altijd oplost: http://www.phphulp.nl/php/tutorial/html-ajax-css-javascript/html-in-2013/808/flexbox/2239/
http://jsbin.com/iyaHOTiN/1/edit
Gewijzigd op 06/12/2013 11:58:05 door Wouter J