垂直複選框

的對齊我有這樣的HTML代碼，我想在它的跨度垂直對齊checbox：垂直複選框

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
<html> 
    <head> 
     <title>asdad</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link href="inner_css/account.css" rel="stylesheet" type="text/css" /> 

    </head> 
    <body class="xxx"> 
     <div class="fieldWrapper"> 
      <span class="fieldHeader">C++</span> 
      <span class="checkboxOfField"><input style="text-align:center; vertical-align:middle" type="checkbox"></span> 
      <div class="fildtablewrapper"> 
       <table> 
        <tr> 
         <td> 
          0-2 
         </td> 
         <td> 
          2-5 
         </td> 
         <td> 
        5 ומעלה        
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="radio" name="xxx" value="1"> 
         </td> 
         <td> 
          <input type="radio" name="xxx" value="2"> 
         </td> 
         <td> 
          <input type="radio" name="xxx" value="3"> 
         </td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </body> 
</html>

這CSS代碼：

.xxx{ 
    direction: rtl; 
    text-align: center; 
} 


.fieldWrapper{ 
    display: inline-block; 
    width: 140px; 
    background-color: yellow; 
    text-align: center; 
} 

.fieldHeader{ 
    display: inline-block; 
    width: 100%; 
    direction: ltr; 
    text-align: center; 
} 

.checkboxOfField{ 
    display: inline-block; 
    width: 100%; 
    background-color: red; 
    height: 40px; 
} 

.fildtablewrapper{ 
    display: inline-block; 
    width: 100%; 
    text-align: center; 
} 

table{ 
    width: 100%; 
} 

td{ 
    width: 33.33%; 
}

，我仍然不能垂直對齊複選框，我搜索了我們，找不到適合我的東西。請幫助！

來源

2012-09-25 vlio20

混合外部css和內聯css是非常糟糕的做法，可能比單獨使用內聯css更糟糕。垂直對齊在其元素也有顯示時效果最好：table-cell;儘管如果你需要顯示，這將不起作用：內聯......有許多可能的解決方法，包括提到行高的答案。 – Dom

添加到您的.checkboxOfField風格：

line-height: 40px;

，這將使中心到跨度的40像素高度的複選框在你的CSS文件

來源

2012-09-25 19:59:20 kingkode

這裏是[jsFiddle]（http://jsfiddle.net/rmcmaster/cqzv6/） – kingkode

我試過了，它沒有工作 – vlio20

它適用於jsFiddle，但在我的Chrome瀏覽器它不工作 – vlio20

嘗試增加以下

.checkboxOfField input { 
height: 100%; 
}

來源

2012-09-26 12:06:23

+1，this爲我做了詭計。 – GrandmasterB

回答

相關問題