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

すべてをコンテナーに入れ、そのコンテナーに最小の高さと固定幅を追加します。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 に答える