0

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

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;
}

谢谢帮助

4

4 回答 4

1

这是最好的方法：

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/

于 2013-08-05T15:06:03.883 回答
1

在桌子上使用margin: auto可能会奏效。不确定这对你来说是否足够。

看看这个jsFiddle

于 2013-08-05T14:32:25.117 回答
1

将所有东西放在一个容器中，为该容器添加一些最小高度和固定宽度。min-height 很有用，这样即使没有内容，页脚也将始终位于底部。

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

<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/

于 2013-08-05T14:37:02.373 回答
0

我会用

margin: auto;

在复选框元素上。此外，您的垂直对齐实际上并没有任何作用。

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

于 2013-08-05T16:08:08.180 回答