2013-10-06 7 views
0

настоящее время я использую следующий вид входа в систему, где я хочу, чтобы изменить дизайн немного:Изменить расположение текста в CSS

http://html-form-guide.com/php-form/php-login-form.html

Я хочу, чтобы поместить «Вход» в середине коробки, вместо Слева:

Я также узнал, что вы можете изменить текст, шрифт и т. д. в fg_membersite.css (строка 17). Интересно, что в Chrome он отображается посередине, только в Firefox он показан слева. Поскольку я новый работник CSS, я хотел спросить, может ли кто-нибудь помочь мне решить эту проблему несовместимости.

Так как он также содержит множество материалов на основе Javascript, я не был уверен, что если я опубликую исходники, это будет разумно, потому что в любом случае мне придется опубликовать весь источник.

Заранее благодарен!

EDIT: Намного красивее. Спасибо:

http://rapidhdd.com/images/4013242013-10-06_1842.png

ответ

0

Используйте это для центра текстовой части:

<form id='login' action='login.php' method='post' accept-charset='UTF-8'> 
<fieldset > 
<legend align="center">Login</legend> 
<input type='hidden' name='submitted' id='submitted' value='1'/> 

<label for='username' >UserName*:</label> 
<input type='text' name='username' id='username' maxlength="50" /> 

<label for='password' >Password*:</label> 
<input type='password' name='password' id='password' maxlength="50" /> 

<input type='submit' name='Submit' value='Submit' /> 

</fieldset> 
</form> 

Я предполагаю, что вы изменили HTML код, но обратите внимание: <legend align="center">Login</legend>

ALIGN = "центр"

http://jsfiddle.net/4szBC/


EDIT:

Так как кажется, как выравнивание осуждается вас, может сделать это с помощью с помощью CSS.

legend { 
    text-align: center; 
} 

Если вы хотите право CSS в HTML, добавьте его в <script> тег и поместить его в <head>. Как это:

<script type="text/css"> 
    legend { 
     text-align: center; 
    } 
</script> 

http://jsfiddle.net/4szBC/1/

+0

'align' атрибут является устаревшим, и вы не должны предположить, что в качестве решения – lukaleli

+0

Не знаю что. Мои извинения! Изменен мой ответ – Jacob

+0

Спасибо за ваш ответ первым! В самом деле, я ценю это, я искал решения весь день ... Проблема просто в том, что это ошибка Firefox. Я попытался добавить его как скрипт и добавить его в файл CSS, в Chrome он отображается правильно, только Firefox делает проблемы. Если вы хотите, я могу загрузить его на общедоступный FTP-сервер – Metro1337

0

добавить представить кнопку несколько правил CSS:

input[type=submit] { 
    display: inline-block; 
    margin: 0 auto; 
    padding: 10px 30px; 
} 
+0

Подождите ... Ваш взгляд уже неплохой. Спасибо за ваше предложение! – Metro1337

+0

И, между прочим, вы также знаете способ сделать промежуток между текстом «Username» и TextBox под ним немного больше?Потому что он выглядит так туго, и, помещая один
рядом с ним, сделайте пространство большим – Metro1337

+0

просто добавьте к ним margin: 10px 0; в вашем CSS (или любое другое значение, которое вы хотите) – lukaleli

Смежные вопросы