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

只需改变：

display: block;

为：

display: inline;

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

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

您可以尝试类似的事情;

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

Here 是现场演示。

Answer 5

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"

标题显示阻止带有文本的行

5 个答案: