Question

我想显示页面中心的复选框。我应该使用固定的头寸来解决我的问题吗？

HTML

<div class="checkboxes">
<table>
    <tr>
        <td data-bind="foreach: viewModel.Addresses() ">
            <label for="CheckBoxOne"><input id="CheckBoxOne" type="checkbox" data-bind="attr: { value: $data }, checked: viewModel.ui.OptionsCheck" />
            <span data-bind="text: $data"></span>
            </label>
        </td>
    </tr>   
</table>
</div>

CSS

.checkboxes label
{ 
    display: block;
    float: left;
    padding-right: 10px;
    white-space: nowrap;
}

.checkboxes input
{ 
    vertical-align: middle;
}

.checkboxes label span
{
    text-align:center;
    vertical-align: middle;
}

寻求帮助

Answer 1

在桌面上使用margin: auto可能会有所帮助。不确定这对你来说是否足够。

看看这个jsFiddle

Answer 2

将所有东西放入容器中，为该容器添加一些最小高度和固定宽度。最小高度很有用，即使没有内容，页脚总是处于按钮状态。

点亮复选框中心只需添加一些边距或填充

<div class="contents"><!-- put the checkbox div inside this div -->
    <div class="checkboxes">

.contents{
 width:400px;
 min-height:600px;
}

.checkboxes
 { 
     margin:50%;
 }

一个jsfiddle演示 http://jsfiddle.net/yNxjq/

Answer 3

这是最好的方式：

HTML

<div id="outer">
  <div id="middle">
    <div id="inner">
      <input type="checkbox">
    </div>
  </div>
</div>

CSS

body, html {height: 100%;margin:0;}
#outer {height: 100%; width:100%; overflow: hidden; position: relative;text-align:center}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for quirk explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%; position: static;}

#inner {position: relative; top: -50%} /* for quirk explorer only */
/* optional: #inner[id] {position: static;} */

样本 http://jsfiddle.net/SnwD3/

Answer 4

我会用

margin: auto;

复选框元素上的

。你的垂直对齐也不是真的。

http://jsfiddle.net/CxGEP/1/ 用灰色背景来显示填充的工作原理。

位置复选框位于页面中央

4 个答案: