2

text-align:center;ヒーローユニットの横型を設定してから中央に配置しようとしていますdisplay:block-inline;

デモについてはjsfiddleを参照してくださいhttp://jsfiddle.net/bVJZ2/

ただし、チェックボックスと送信ボタンが正しく配置されていないため、これは完全には機能していません。これを修正する方法の提案はありますか？

4

2 に答える 2

1

チェックボックスを中央に配置できない問題がいくつかあります。

  1. <div class="controls">がありmargin-leftます。そのdiv内にチェックボックスを入れないでください。

  2. input[checkbox]がありますfloat: left。そのフロートを次のように削除する必要があります。

    .radio input[type="radio"], .checkbox input[type="checkbox"] {
    float: none;
}
  3. チェックボックスの位置が正しくありません。vertical-align: top最後のセレクターに追加する必要があります。

総括する：

HTML： 

<div class="control-group">
   <label class="checkbox">
       <input type="checkbox"> Remember me
   </label>
   <button type="submit" class="btn">Sign in</button>
</div>

CSS：

.radio input[type="radio"], .checkbox input[type="checkbox"] {
    float: none;
    vertical-align: top;
}

ここで結果を見ることができます：http：//jsfiddle.net/GW8zk/

于 2013-02-25T20:59:46.653 に答える
1

さて、これは、フォームを中央に配置したヒーローユニットを実装する方法です。

中央揃えの形式の JSFiddle http://jsfiddle.net/shail/YmmVS/

まずcss：

.hero-unit {
padding:50px 50px 50px 50px;
    }
.form-horizontal .control-label {
    width: 61px;
    }
.form-horizontal .controls {
margin-left: 80px;
    }
  /* Landscape phones and down */
  @media (max-width: 480px) { 

   .hero-unit{
        margin-left:-20px;
        margin-right:-20px;
      }
   .form-horizontal .controls {
        margin-left: 0;
      }
  }

形 Html 部分:

<div class="container">
<div class="hero-unit">
    <div class="row-fluid">
        <div class="offset4 span4">
            <legend>Sign in to WebApp</legend>
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Email</label>
                    <div class="controls">
                        <input type="text" id="inputEmail" placeholder="Email">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputPassword">Password</label>
                    <div class="controls">
                        <input type="password" id="inputPassword" placeholder="Password">
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox">Remember me</label>
                        <button type="submit" class="btn">Sign in</button>
                    </div>
                </div>
            </form>
        </div>
     </div>
   </div>
 </div>
于 2013-02-26T02:48:47.210 に答える