テーブルセルの入力とラベルの整列

labelとinputを垂直に、水平に、表の中央に配置する方法は？テーブルセルの入力とラベルの整列

助けてください。ありがとう。

今ではそれが

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秒をどのように見えるべきか

now

に見えます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

テーブルセルの入力とラベルの整列

答えて

関連する問題