0

ラベルとテキスト入力のこのセット（JsFiddleリンク）があります。

全体をページの中央に配置するにはどうすればよいですか？

私はそれらをdivでラップし、それをcetnerに合わせて設定しようとしましたが、期待したことはまったくできませんでした。

あなたより、どんな助けでもありがたいです。

参照用のコード：

<div>
<div class="left">
    label
</div>
<div class="right">
    input element
</div>
</div>



<div>
<div class="left">
    another label
</div>
<div class="right">
    another input element
</div>
</div>

//align the labels and input nicely

.left {
    width: 20%;
    float: left;
    text-align: right;
}
.right {
    width: 65%;
    margin-left: 10px;
    float:left;
}
4

2 に答える 2

2

floatを使用する場合は、全体をDIVでラップして適用する必要があります。margin: 0 auto;

この場合、これを行います。

<style>
.field {
    width: 80%;
    margin: 0 auto; 
}
.left {
    width: 20%;
    text-align: right;
    display: block;
    float: left;
    margin-right: 5%;
}
</style>

<div class="field">
   <label class="left">label</label>
   <input type="text">
</div>

<div class="field">
   <label class="left">another label</label>
   <input type="text">
</div>
于 2012-10-24T21:59:08.830 に答える
1

全体をdivでラップして設定します

         margin: auto;

text-align: center;また、メソッドを使用する場合は、中央に配置するdivの親に適用する幅を設定します。

于 2012-10-24T21:59:16.663 に答える