Alinierea verticală în celulă de masă împreună cu dividendul plutitor

Am următorul cod HTML (eșantion):


<html>
  <head>
    <title>TH-Alignment</title>
    
  </head>
  <body>
    <table cellspacing="0" cellpadding="0">
        
<thead> <tr> <th> <div class="sb"></div> <div>Heading 1</div> </th> <th> <div>Heading 2</div> </th> </tr> </thead> </table> </body> </html>

Divul din a doua coloană este centrat pe verticală, div în prima coloană nu (poziționat întotdeauna în partea de sus a celulei de masă). De ce se află interiorul plutitor? coloana 1 influențează alinierea verticală a celuilalt div în celula tabelă?

Mulțumesc anticipat.

0
+1 întrebare bună. Extindeți un pic pe codul dvs. (o anumită înălțime pe o parte, o anumită afișare în divs și câteva chei pentru depanare), vedeți această vioară . Se pare că conținutul din primul este v-aliniat, dar primul div este în partea de sus a liniei din anumite motive ...
adăugat autor Jeroen, sursa
Răspunsul, cred, este că în acest spec. . Dacă nimeni nu mă bate la ea, pot încerca să-mi fac un răspuns real și demo când am timp.
adăugat autor Jeroen, sursa
Mă întreb dacă <div> este permisă în <th> citind w3.org/TR/html4/struct/tables.html#h-11.2.6
adăugat autor Robert Niestroj, sursa

1 răspunsuri

Dacă extindeți înălțimea pentru th , veți observa că elementele sunt încă aliniate vertical la mijloc.

Consultați acest Exemplu de filament !

Problema aici este line-height .

Deoarece aveți mai mult de un element pe primul th și unul dintre ele are o valoare height definită, toate elementele sunt aliniate la mijlocul , dar între ele, acestea sunt aliniate la înălțimea lor line-height , care nu este definită și este calculată fie de font-size o definiție a elementului părinte.

Deoarece elementul dvs. plutitor are o height de 26px , acesta crește, dar elementul cu textul nu este definit ca code> height este egal cu font-size furnizat de textul interior, astfel nu ajunge niciodată la mijlocul fratelui său plutitor.

Pentru a rezolva acest lucru, trebuie să utilizați:

line-height: 26px;

Pentru a seta o line-height egală cu height elementului dvs. plutitor, alinierea textului la mijlocul elementului plutitor și rezolvarea aspectului vizual al aliniere verticală.


See this Fiddle Example with that working solution!


Note: One element is not affecting the other as you suspect, they just don't have enough declarations to have a coherent alignment among them!

În mod implicit, textul și imaginile sunt aliniate la linia de bază , dacă nu este indicată line-height , linia de bază .

0
adăugat
+1 în măsura în care pot spune acest lucru ar trebui să fie răspunsul acceptat: D
adăugat autor Jeroen, sursa