css - 标题显示块一行文字

Question

这是我的网站 http://maximearchambault.com/index.php/contact/

我的问题是关于我的一个标题。我用它作为页面的主标题，联系方式/信息

我的问题是该块与文本不成一行。我希望文本以青色块为中心

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

Answer 1

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 2

添加line-height:33px;到您的h2 {... }

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

}

Answer 3

只是改变：

display: block;

至：

display: inline;

另请记住，CSS 区分大小写，因此 HEIGHT 不是有效属性。

Answer 4

您可以将您的 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 5

你可以尝试类似的东西；

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

这是工作现场演示。