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="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/

无法居中设置字段集的内容

1 个答案: