当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Unable to center contents of a fieldset

问题描述:

am having trouble trying to center the contents of one of my fieldsets.

It has a captcha image, an input field and a submit button. I've tried using margin: 0 auto; but to no avail...

<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 CODE:

.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

}

Addition:

Unfortunately despite centering the fieldset the contents don't center when set to display block as per the second method. Strange as both the fiddles display great.

I'm wondering if it's to do with the ee captcha?

网友答案:

Using the inheritance of CSS, you can simply center the fieldset and declare all child elements as block-level, and everything will become centered. Simplified example markup:

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>

I'm a purist and a minimalist and find this approach to be simple and elegant while keeping your markup clean and uncluttered.

Example: http://jsfiddle.net/WSsTP/

分享给朋友:
您可能感兴趣的文章:
随机阅读: