0

3 列のページがあります。各列は、次のスタイルを持つ div です。

.Row1 {
    text-align:center;
    display:inline-block;
    vertical-align:top;
    padding:0.5%;
    width:31.5%;
}

HTML は次のとおりです。

<div class="Row1">
    <h2>Header</h2>
    <br />
    <form>
        Form stuff goes here
    </form>
</div>

私のフォームは、テキスト フィールド、いくつかのラジオ ボタン、送信ボタンだけで構成されています。問題は、上記のコードにフォームを配置すると、テキスト フィールド、ラジオ ボタン、および送信ボタンも中央に配置された中央のフォームが表示されることです。

私がやろうとしているのは、フォーム自体を (コンテナーとして) 中央に配置することですが、すべてを左に揃えます。

中央にテキストが配置された div でフォームをラップし、フォーム スタイルを左揃えに設定しようとしましたが、うまくいきませんでした。自動マージンは、ラッピング div にあるかフォームにあるかに関係なく、ラッピング div なしでは機能しませんでした (つまり、追加の div。Row1 div は常に残ります)。

編集: http://jsfiddle.net/pJwqe/

4

2 に答える 2

1

text-aligndiv またはフォームを「整列」するためのプロパティではありません。代わりに、それが言うように、テキストを揃えます。ブロック レベルの要素を中央に配置する場合は、マージンを使用する必要があります。単一の要素をマージンで中央に配置するデフォルトの方法は、たとえば最上位のコンテナの場合、それを に設定することmargin: 0px auto 0px;です。

3 列のレイアウトが必要な場合は、このようなものが必要だと思います。margin-leftまたはを設定して div のマージンをスタイル設定してmargin-rightから、高度なセレクターを使用して最初/最後の要素をスタイル設定できます (したがって、最初の要素に margin-left を指定したり、最後の要素に margin-right を指定したりする必要はありません)。

ご覧のとおり、フォームは中央揃えになりましたが、コンテンツは中央揃えではありません。（フォームに幅を与える必要があります。そうしないと、コンテンツがある場合、デフォルトで包含ブロックを埋めます）。

注意: コードの残りの部分に関連する可能性がありますが、このテスト ケースでvertical-alignは何もしません。

于 2013-06-30T23:46:04.500 に答える