CSS Image Verticle align

[turkspartan]

Hey guys. I have a header and an image in it(logo). I would like to vertically align this. If I add margin or padding top to push it down, it makes my header bigger, which I do not want. Thanks!

 

Here is the site http://restonwebdesign.com/carpets/?page_id=96

	/*************************************************	3.	Header  								*************************************************/#header {	margin: 0px;	padding: 0px;	}#header #masthead {	display: block;	width: 100%;	text-align: center;	padding-top: 40px;	padding-bottom: 0px;	}#header .site-title {	display: block;	font-family: 'Oswald', Helvetica, Arial, sans-serif;	font-size: 3.2em;	font-weight: normal;	text-transform: uppercase;	letter-spacing: 0px;	line-height: 1.2;	padding: 0px;	margin: 0px;	}#header .site-description {	display: block;	color: #666666;	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;	font-size: 1.1em;	font-weight: normal;	text-transform: none;	line-height: 1.8;	overflow: hidden;	}#custom-header {	display:block;	font-size: 0;	text-align: center;	text-indent: -999em;	line-height: 0;	margin: 0px;	padding: 0px;	overflow: hidden;	z-index: 8;	}#custom-header img {	 float:right;	}	

I don't know if you need this, but this is in the header area of WordPress.

<?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) { ?>					<p id="custom-header"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php esc_attr( bloginfo('name') ); ?>" /><?php bloginfo( 'name' ); ?></a></p>

[ChrisLannister]

#custom-header img {margin: 0 auto 0 auto;}

Does this not work?

[dsonesuk]

?? That is horizontal align, the reason the header becomes bigger is because it contains two row containers, 1 row for logo, 1 x row for menu. Adding margin/padding to top, just pushes both down making the header container taller, you need to take the logo container out of flow of the other elements, and the only way to do this is to use position: absolute;

#header .row {/*use position relative to make logo container positioning relative this containers other edges */position:relative;}

Now the #custom-header must have originally used position: before, because you can't use z-index without it

#custom-header {    display: block;    font-size: 0;    line-height: 0;    margin-bottom: 0;    margin-left: 0;    margin-right: 0;    margin-top: 0;    overflow-x: hidden;    overflow-y: hidden;    padding-bottom: 0;    padding-left: 0;    padding-right: 0;    padding-top: 0;    text-align: center;    text-indent: -999em;    z-index: 8; /* who nicked my position absolute... oh look its back*//*added by dsonesuk*/position: absolute;top:0; /*adjust to requirements */right:0;}