Push image or <h2> down a bit

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.

Answers


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;


Need Your Help

Generate repeating hexagonal pattern with CSS3

html css css3 design-patterns css-shapes

So, I need to make a repeating hexagonal pattern, using CSS. If images are needed, I can go there, but I'd prefer to just use CSS if possible.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.