Question

I placed a logo (a Microsoft logo) on my panel’s header with <center><h2> img scr...</h2></center>

It’s at the center where I want it; However, it’s a bit high on the top of my panel’s header, so it’s not exactly at the center vertically wise.

This the CSS of the whole panel (it’s header included):

.panel {
    background: url("../images/panel_bg2.png") no-repeat scroll 0 0 transparent;
    width:148px;
    height:270px;

}


.panel_header {
    background: url("../images/panel_header_bg.png") no-repeat scroll 0 0 transparent;
    width:149px;
    height:54px;
    position:absolute;


}

This is the html :

<div class="panel">
<div class="panel_header">
<center><h2><img src="images/ms_logo.png" width="102" height="21" /> </h2></center>

Is there any way I can move the image ( the Microsoft logo) down a bit ?

You can see what I’m talking about here: http://www.qubespace.com/certwizard/
The panel is right under the slide. I just want to push the logo (the Microsoft logo) a bit down in the header div.
I know I’m missing something.

I will greatly appreciate a response.

Thank You !

PS: The framework I’m using is WordPress, and the html is placed in a widget. I’m using U-Design theme.

Answer 1

Add a margin-top rule to your panel class to move the Microsoft logo up or down. Negative values move it up, positive values down. If you want to center it, set the margin to margin:0 auto;