表格单元格中的输入和标签对齐方式

如何将label和input垂直对齐并水平居中放置在表格单元格中？表格单元格中的输入和标签对齐方式

请帮忙。谢谢。

现在看起来

now

应该如何看待

must be

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
\t <style type="text/css"> 
 
\t \t table { 
 
\t \t \t width: 200px; 
 
\t \t \t height: 200px; 
 
\t \t \t background-color: blue; 
 
\t \t \t text-align: center; 
 
\t \t \t vertical-align: middle; 
 
\t \t } 
 

 
\t \t td { 
 
\t \t \t background-color: yellow; 
 
\t \t } 
 

 
\t \t input { 
 
\t \t \t width: 50px; 
 
\t \t \t height: 50px; 
 
\t \t } 
 

 
\t \t label { 
 
\t \t \t display: inline-block; 
 
\t \t \t line-height: 50px; 
 
\t \t } 
 
\t </style> 
 
\t <table> 
 
\t \t 
 
\t \t <tr> 
 
\t \t \t \t \t 
 
\t \t \t <td> 
 
\t \t \t \t <input type="checkbox" name="" id="c1"> 
 
\t \t \t \t <label for="c1">FFFF</label> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </table> 
 
</body> 
 
</html>

来源

2017-04-22 A. Melnyk

如果从'输入取消固定大小'，那么他们在中心很好地对齐，太。 –

vertical-align: middle小号et input和label将正确居中。

我也放弃了一些非必要特性，如line-height

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <style type="text/css"> 
 
    table { 
 
     width: 200px; 
 
     height: 200px; 
 
     background-color: blue; 
 
     text-align: center; 
 
    } 
 
    
 
    td { 
 
     background-color: yellow; 
 
    } 
 
    
 
    input { 
 
     width: 50px; 
 
     height: 50px; 
 
     vertical-align: middle; 
 
    } 
 
    
 
    label { 
 
     vertical-align: middle; 
 
    } 
 
    </style> 
 
    <table> 
 

 
    <tr> 
 

 
     <td> 
 
     <input type="checkbox" name="" id="c1"> 
 
     <label for="c1">FFFF</label> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

来源

2017-04-22 17:11:28 LGSon

 <!DOCTYPE html> 
 
     <html> 
 
     <head> 
 
     \t <title></title> 
 
     </head> 
 
     <body> 
 
     \t <style type="text/css"> 
 
     \t \t table { 
 
     \t \t \t width: 200px; 
 
     \t \t \t height: 200px; 
 
     \t \t \t background-color: blue; 
 
     \t \t \t text-align: center; 
 
     \t \t \t vertical-align: middle; 
 
     \t \t } 
 

 
     \t \t td { 
 
     \t \t \t background-color: yellow; 
 
     \t \t } 
 

 
     \t \t input { 
 
     \t \t \t width: 50px; 
 
     \t \t \t height: 50px;  
 
       vertical-align: middle; 
 
     \t \t } 
 

 
     \t \t label { 
 
     \t \t \t display: inline-block; 
 
     \t \t \t line-height: 50px; 
 
       vertical-align: middle; 
 
       
 
     \t \t } 
 
     \t </style> 
 
     \t <table> 
 
     \t \t 
 
     \t \t <tr> 
 
     \t \t \t \t \t 
 
     \t \t \t <td> 
 
     \t \t \t \t <input type="checkbox" name="" id="c1"> 
 
     \t \t \t \t <label for="c1">FFFF</label> 
 
     \t \t \t </td> 
 
     \t \t </tr> 
 
     \t </table> 
 
     </body> 
 
     </html>

来源

2017-04-24 10:38:16

表格单元格中的输入和标签对齐方式

回答

相关问题