Div는 CSS 디스플레이를 사용하여 세로로 정렬하지 않습니다 : table;

누군가 상자 상자가 세로로 정렬되지 않는 이유를 말해 줄 수 있습니까? 나 또한 테이블을 사용하여 시도하고 그것도 정렬되지 않습니다. 감사!Div는 CSS 디스플레이를 사용하여 세로로 정렬하지 않습니다 : 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; 
    }

바이올린 : 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 디스플레이를 사용하여 세로로 정렬하지 않습니다 : table;

답변

관련 문제