Div не будет выравниваться по вертикали с помощью CSS display: table;

Может ли кто-нибудь сказать мне, почему коробка div не будет вертикально выравниваться, пожалуйста? Я также попытался использовать таблицу, и она не будет выравниваться. Благодаря!Div не будет выравниваться по вертикали с помощью CSS display: table;

<html> 
<head> 
    <style> 

    #box{ 
     width:400px; 
     height:400px; 
     background-color:black; 
     } 

    #tb{ 
     display:table; 
     width:100%; 
    } 

    #td{ 
     display:table-cell; 
     vertical-align:middle; 
     text-align:center; 
    } 

    </style> 
    </head> 

    <body> 
     <div id="tb"> 
      <div id="td"> 
       <div id="box"></div> 
      </div> 
     </div> 
    </body> 
    </html>

источник

2013-08-24 Xochi

Css:

#box { 
     width:400px; 
     height:400px; 
     background-color:black; 
     display: table-cell; 
     vertical-align: middle; 
     text-align: center; 
    }

Fiddle: http://jsfiddle.net/9uGAU/

источник

2013-08-24 09:08:28

Спасибо, но я хочу, чтобы выровнять по вертикали в окне на экране не текст – Xochi

Попробуйте один

HTML

<div id="tb"> 
    <div id="td"> 
     <div id="box"></div> 
    </div> 
</div>

CSS

html, body { 
    height:100%; 
} 
#box { 
    vertical-align: middle; 
    width: 200px; 
    height: 200px; 
    background-color: #000; 
    margin: 0 auto; 

} 
#tb{ 
    display: table; 
    height: 100%; 
    width: 100%; 
    background: #999; 
    text-align: center; 
} 
#td { 
    display: table-cell; 
    width: 100%; 
    height: 100%; 
    background: #999; 
    text-align: center; 
    vertical-align: middle; 
}

Live Demo

источник

2013-08-24 09:18:34 Nandhakumar

Div не будет выравниваться по вертикали с помощью CSS display: table;

ответ

Смежные вопросы