Невозможно центрировать содержимое набора полей - PullRequest
Новая
       6

Невозможно центрировать содержимое набора полей

0 голосов
/ 27 августа 2011

У меня проблемы с попыткой центрировать содержимое одного из моих наборов полей. Он имеет изображение с картинки, поле ввода и кнопку отправки. Я пытался использовать поле: 0 авто; но безрезультатно ... 

<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
}

Дополнительно:

К сожалению, несмотря на центрирование набора полей, содержимое не центрируется, если установлено отображение блока согласно второму способу. Странно, так как обе скрипки выглядят великолепно.

Мне интересно, связано ли это с ее капчей?

1 Ответ

4 голосов
/ 27 августа 2011

Используя наследование CSS, вы можете просто center 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/

...