0

フィールドセットの 1 つのコンテンツを中央に配置しようとして問題が発生しています。キャプチャ画像、入力フィールド、送信ボタンがあります。margin: 0 auto; を使用してみました。しかし、無駄に...

<fieldset class="fieldset_submit">


        {if captcha}

        {captcha}

        <p>Please enter the text you see above</p>

        <input type="text" name="captcha" value="" />
        {/if}
        <input type="submit" name="submit" value="Send" class="submit" />

        </fieldset>

CSS コード:

.fieldset_submit {
display: block;
width: 500px;
margin: 0 auto;
border: none;
text-align: center;
padding: 40px;
}


input, select {
    display: block;
    margin: 5px 0 20px 0;
    width: 300px;
    height: 25px;
    font-size: 16px;
    color: gray;
    padding: 5px;
    border: 2px solid #ccc;
}

select {height: 35px;}

label {display: block; margin-bottom: 10px;}

fieldset.fieldset_centre textarea {
    border: 2px solid #ccc;
    color: gray;
    padding: 10px;
    font-size: 16px;
    width: 800px;
    margin: 0 auto;
}


.submit {
    width: 100px;
    border: none;
    height: 30px;
    text-align: center;
    text-transform: uppercase;
    background-color: #ff8399;
    color: white;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.submit:hover {cursor: pointer;}

.submit:active {
    position:relative; 
    top:2px
}

添加：

残念ながら、フィールドセットを中央に配置しても、2 番目の方法でブロックを表示するように設定すると、コンテンツが中央に配置されません。両方のフィドルが素晴らしく表示されるので奇妙です。

eeキャプチャと関係があるのだろうか？

4

1 に答える 1

3

CSS の継承を使用して、単純に中央に配置しfieldset、すべての子要素をブロック レベルとして宣言すると、すべてが中央に配置されます。単純化されたマークアップの例:

CSS:

.align-center {
    display: block;
    margin: 1.0em auto;
    text-align: center;
}

HTML:

<fieldset class="align-center">

    <img src="http://i.stack.imgur.com/mbE6E.jpg" alt="reCAPTCHA" />

    <p>Please enter the text you see above</p>

    <input type="text" name="captcha" value="" />

    <input type="submit" name="submit" value="Send" />

</fieldset>

私は純粋主義者であり、ミニマリストであり、マークアップをクリーンで整然とした状態に保ちながら、このアプローチがシンプルでエレガントであることを発見しました。

例: http://jsfiddle.net/WSsTP/

于 2011-08-27T16:50:37.843 に答える