text verticaal uitlijnen in midden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ozzie PHP

Ozzie PHP

26/03/2013 16:52:03
Quote Anchor link
Hallo mensen,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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 {

}

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
 
PHP hulp

PHP hulp

16/04/2024 22:19:59
 
Eddy E

Eddy E

26/03/2013 16:56:05
Quote Anchor link
Waarom zou de vertical-align: center; / middle; niet werken?
Hier (Opera 11) werkt dat perfect:

http://codepen.io/anon/pen/gqmDv
 
Ozzie PHP

Ozzie PHP

26/03/2013 17:54:21
Quote Anchor link
Ah, wacht... nee, hij werkt niet... het is default behaviour van een <td> zie ik. Hij doet het ook zonder vertical-align.

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
 
Joakim Broden

Joakim Broden

26/03/2013 19:19:47
Quote Anchor link
display: table-cell; does the trick ;-)
 
Ozzie PHP

Ozzie PHP

26/03/2013 19:36:36
Quote Anchor link
Ah ja, oke... dat werkt wel :)
Ik ga weer ff aan de slag. Misschien dat ik hier straks nog een vraag stel, maar hopelijk is het niet nodig!
 
Markjosol markjosol

markjosol markjosol

06/12/2013 08:50:51
Quote Anchor link
Vertical-align staat op middle, maar de tekst staat niet in het midden:

Spamlink weggehaald, gelieve alleen linkjes met relevantie tot het topic te plaatsen[/modedit]
Gewijzigd op 06/12/2013 09:05:28 door Wouter J
 
Kris Peeters

Kris Peeters

06/12/2013 11:20:34
Quote Anchor link
Waarom kan HTML/CSS niet regelen dat vertical-align: middle gewoon werkt?
Is er iets wat hen tegen houdt om dat voor eens en altijd op te lossen?
 
Wouter J

Wouter J

06/12/2013 11:38:04
Quote Anchor link
vertical-align werkt alleen met table cellen.

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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.