Заголовки отображают блок строки с текстом

Question

Вот мой сайт http://maximearchambault.com/index.php/contact/

Мой вопрос касается одного из моих заголовков. Я использую его для основного заголовка страницы, контакт / информация

Моя проблема в том, что блок не является строкой с текстом. Мне понравится, что текст будет по центру с голубым блоком

h2 { font-size: 30px;  
     font-weight: bold; 
     background: #00FFFF; 
     width: 600px;
     HEIGHT: 33px; 
     display: block; 
}

Answer 1

Добавлять line-height:33px; на ваш h2 {... }

h2 { font-size: 30px;  
     font-weight: bold; 
     background: #00FFFF; 
     width: 600px;
     HEIGHT: 33px; 
     display: block; 
     line-height:33px;

}

Answer 2

h2 {
    background: none repeat scroll 0 0 #00FFFF;
    font-size: 30px;
    font-weight: bold;
    height: 33px;
    line-height: 33px;
    text-align: center;
    width: 600px;
 }

 1. Remove the properly "display: block" from h2 class properties because h2 is block element
 2. Add a property - "text-align: center"

Answer 3

Вы можете изменить свой CSS на:

h2{
    background: none repeat scroll 0 0 #00FFFF;
    display: table-cell;
    font-size: 30px;
    font-weight: bold;
    height: 33px;
    vertical-align: middle !important;
    text-align:center;
    width: 600px;
}

Answer 4

Просто измените:

display: block;

чтобы:

display: inline;

Также помните, что CSS чувствителен к регистру, поэтому HEIGHT не является допустимым свойством.

Answer 5

Вы можете попробовать что-то вроде;

h2 {
    font-size: 30px;  
    font-weight: bold; 
    background: #00FFFF;
    width: 600px;
    display: block;
    padding-top: 2px;
    padding-bottom: 2px;   
}

Вот рабочая Live Demo.