Не может центрирование текста с HTML5/CSS

Я пытаюсь просто центрирование текста по горизонтали в виде следующим образом:Не может центрирование текста с HTML5/CSS

<!DOCTYPE html> 
<html> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <div id="contact-form"> 
     <head-black>STEWARD'S WEEKLY REPORT</head-black><br> 
    </div> 
</html>

содержимого style.css:

#contact-form { 
    background-color:#F2F7F9; 
    width:925px; 
    padding:10px; 
    margin: 10px auto;  
    border: 6px solid #8FB5C1; 
    -moz-border-radius:25px; 
    -webkit-border-radius:25px; 
    border-radius:15px; 
    position:relative; 
} 

#contact-form head-black { 
    display:inline-block; 
    font-size:14px; 
    text-decoration:underline; 
    text-align:center; 
}

текста остается выравниванием по левому краю.

источник

2013-08-19 George Fernett

<head-black> - нестандартный синтаксис HTML. Использование пользовательских тегов should be avoided. Вместо этого используйте:

<h1 class="head-black">STEWARD'S WEEKLY REPORT</h1>

и CSS:

#contact-form { 
    background-color:#F2F7F9; 
    width:925px; 
    padding:10px; 
    margin: 10px auto;  
    border: 6px solid #8FB5C1; 
    -moz-border-radius:25px; 
    -webkit-border-radius:25px; 
    border-radius:15px; 
    position:relative; 
    text-align:center; /* put this here */ 
} 

#contact-form .head-black { 
    display:inline-block; 
    font-size:14px; 
    text-decoration:underline; 
}

jsfiddle

Редактировать

Если вы хотите, чтобы центрировать только <h1>, просто установите его в display: block, и установите text-align: center в теге h1. Не забудьте, чтобы удалил text-align: center из # блока формы контента. Выполните следующие действия для .head-black CSS:

#contact-form .head-black { 
    display:block; 
    font-size:14px; 
    text-decoration:underline; 
    text-align: center; 
}

jsfiddle выше показывает новые изменения.

источник

2013-08-19 13:43:07

Ваше решение отлично. Однако ваш аргумент, что недействительный тег, является «дезинформированным». HTML позволяет настраивать теги, а theres нет правила, которые не запрещают его. Так что, если ваше единственное редактирование, вы можете использовать это решение. – MarsOne

Вы делаете хороший момент. Я соответствующим образом обновлю ответ. Однако использование пользовательских тегов не является хорошей практикой, на мой взгляд, поэтому я не могу потворствовать этому. См. [Здесь] (http://stackoverflow.com/questions/211394/when-to-use-custom-html-tags) также –

Да. Определенно, это не хорошая практика. – MarsOne

Не может центрирование текста с HTML5/CSS

ответ

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