CODEWITHSUNDEEP
htmlcss
Rahul Shah
Rahul Shah

Reputation: 1407

How to leave some top gap for H2 title tag with css

In My Sidebar,i have a red colored background image for H2 title.

I want the h2 title tag to be both vertically and horizontally centered.

I used text-align: center;. The result is this.

Its only horizontally centered and not vertically centered. I added vertical-align: middle;,but it had no effect,I even tried margin-top,also it acted as if there was no such code

Lastly,I tried

 margin-top: auto;
      margin-bottom: auto;

Even that didnt work

The entire css

 #sidebar-wrapper h2 {
     background: url("https://lh6.googleusercontent.com/-FRYoELCr4cs/UWqPgG1XTjI/AAAAAAAAHZs/_825mjRMqrg/s295/54454554+copy.png") no-repeat scroll 0% 0% transparent;
     color: rgb(213, 213, 213);
     height: 50px;
     width:294px;
     margin-top:10x;
     overflow: visible;
     position: relative;
     left: -16px;
     text-align: center;
     color:white;
     margin:0 0 10px
 }

If I alter the last line of margin,both the red colored background and title move(and not the title alone).Here is my site. Can someone please help me.Thanks.

Upvotes: 1

Views: 281

Answers (4)

Giovanni Anthony Bryden Jr.
Giovanni Anthony Bryden Jr.

Reputation: 151

You could use relative positioning. Try top: 10px.

Upvotes: 1

Navand
Navand

Reputation: 476

you can add this to your css:
padding-top: 7px;

Upvotes: 2

Axel A. García
Axel A. García

Reputation: 683

Just add some padding to the style:

#sidebar-wrapper h2 {
     background: url("https://lh6.googleusercontent.com/-FRYoELCr4cs/UWqPgG1XTjI/AAAAAAAAHZs/_825mjRMqrg/s295/54454554+copy.png") no-repeat scroll 0% 0% transparent;
     color: rgb(213, 213, 213);
     height: 50px;
     width:294px;
     margin-top: 10x; /* You have a typo here, is 10px */
     overflow: visible;
     position: relative;
     left: -16px;
     text-align: center;
     color:white;
     margin:0 0 10px
     padding: 7px 0; /* Magic padding */
 }

Upvotes: 2

BingeBoy
BingeBoy

Reputation: 2981

You need to use line-height.

#sidebar-wrapper h2 {
    background: url("https://lh6.googleusercontent.com/-FRYoELCr4cs/UWqPgG1XTjI/AAAAAAAAHZs/_825mjRMqrg/s295/54454554+copy.png") no-repeat scroll 0% 0% transparent;
    color: rgb(213, 213, 213);
    height: 50px;
    width:294px;
    margin-top:10x;
    overflow: visible;
    position: relative;
    left: -16px;
    text-align: center;
    color:white;
    margin:0 0 10px;
    line-height:50px;
}

Upvotes: 2

Related Questions