无法将字段集的内容居中

Question

我在尝试将我的一个字段集的内容居中时遇到问题。 它有一个验证码图像、一个输入字段和一个提交按钮。我尝试过使用 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
}

添加：

不幸的是，尽管将字段集居中，但当按照第二种方法设置为显示块时，内容并未居中。奇怪的是，两把小提琴都表现得很棒。

我想知道这是否与 ee 验证码有关？

Answer 1

使用 CSS 的继承，您可以简单地居中 fieldset 并将所有子元素声明为块级元素，然后所有内容都会居中。简化的示例标记：

CSS:

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

HTML:

<fieldset class="align-center">

    <img src="https://i.sstatic.net/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/