垂直复选框

的对齐我有这样的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

回答

相关问题