1. Accueil
  2. Question et réponse
  3. CSS - Aligner verticalement du contenu DIV

CSS - Aligner verticalement du contenu DIV

2009-12-10 7 views
7

J'essaye de centrer verticalement du contenu via CSS. Pour la vie de moi, je ne peux pas comprendre la cause. Quelqu'un peut-il me dire pourquoi le mot "test" dans le HTML suivant est toujours aligné en haut, peu importe ce que je fais?CSS - Aligner verticalement du contenu DIV

<html> 
    <head> 
     <title>test</title> 
    </head> 

    <body> 
     <table border='0' cellpadding='0' cellspacing='0'> 
      <tr><td style='height:200px; width:300px; background-color:silver;'> 
       <div style='height:100%; width:100%; background-color:gray; text-align:center;'> 
        <div style='vertical-align:middle;'>test</div> 
       </div> 
      </td></tr> 
     </table> 
    </body> 
</html>

Nous vous remercions de votre aide!

Source

2009-12-10 user208662

+4

Pourquoi est-il dans une table? Vous savez que les tableaux ne sont pas destinés à la mise en page? – BalusC

Répondre

0

Essayez d'ajouter valign="middle" à votre balise td, comme:

<td valign="middle" style='height:200px; width:300px; background-color:silver;'>

Source

2009-12-10 14:15:44 inkedmn

+0

Probablement cela fonctionne dans la plupart des navigateurs, mais il n'est pas conforme aux normes. D'un autre côté, l'utilisation de tables n'est pas agréable non plus. – Martijn

+2

La question demande comment aligner verticalement le contenu 'div', pas' td'. –

0

style = réglage Try 'vertical-align: milieu;' dans l'élément parent. En ce moment, vous dites en effet au div interne d'aligner le texte au milieu, mais vous ne lui dites pas d'étirer et d'occuper toute la page. Fondamentalement, vous vous retrouvez avec un élément div aussi petit que le texte.

Vous pouvez utiliser le plugin Firebug dans Firefox pour déboguer ce type de problème CSS!

Source

2009-12-10 14:16:47 rui

-2

essayer d'utiliser line-height: 100px

Source

2009-12-10 14:17:37

4

Un moyen rapide d'alignement vertical, comme dans votre cas, est de faire correspondre la hauteur de la ligne à la hauteur. 

<html> 
    <head> 
     <title>test</title> 
    </head> 
    <body> 
     <table border='0' cellpadding='0' cellspacing='0'> 
       <tr><td style='height:200px; line-height: 200px; width:300px; background-color:silver;'> 
         <div> 
          <div style="text-align: center">test</div> 
         </div> 
       </td></tr> 
     </table> 
    </body> 
</html>

Source

2009-12-10 14:17:52

4

Parce que vertical-align est seulement un substitut CSS à l'attribut valign dans TD, et ne fonctionne donc que sur display: table-cell éléments (et non, la bonne solution est de ne pas changer le DisplayMode de votre DIV)

Si vous le pouvez définir une hauteur fixe à la div, vous devriez être en mesure d'aligner verticalement avec margin: auto 0

Source

2009-12-10 14:20:02

Questions connexes

 Questions connexes