0

here my website http://maximearchambault.com/index.php/contact/

My question is regarding one of my headings. I use it for the main title of the page, contact / info

My problem is the block is not a line with the text. I will like that the text will be centered with the cyan block 

h2 { font-size: 30px;  
     font-weight: bold; 
     background: #00FFFF; 
     width: 600px;
     HEIGHT: 33px; 
     display: block; 
}
Kara
  • 6,115
  • 16
  • 50
  • 57
Maxime Archambault
  • 1
  • 3

5 Answers5

0

add line-height:33px; to your h2 {... } 

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

}
ygssoni
  • 7,219
  • 2
  • 23
  • 24
0

Just change:

display: block;

to:

display: inline;

Also remember that CSS is case-sensitive so HEIGHT is not a valid property.

Spudley
  • 166,037
  • 39
  • 233
  • 307
pirate_pete
  • 11
  • 2
0

You can change your css to:

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;
}
Priya
  • 1,375
  • 8
  • 21
  • 45
0

You may try something like;

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

Here is the working Live Demo.

Alfred
  • 21,058
  • 61
  • 167
  • 249
0
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"
Ram
  • 41
  • 2