Quiero centrar la imagen del logotipo de alineación de mi tema de wordpress, lo intenté pero fallé;
Aquí está el CSS para el área de encabezado
/* Header
-------------------------------------------------------------- */
.logo { float:left; width:370px; margin-bottom: 10px; }
.logo.logo-text { color:#595959; font-size:58px; line-height: 54px; font-family:Georgia; }
.logo.logo-text:hover { color:#575757; text-decoration: none;}
#search { float:left; width:235px; text-align: left; margin-bottom: 10px; }
#search #site-description { line-height: 11px; margin-bottom: 1px; font-size: 11px;}
#search input[type="text"] { width:190px; color:#828282; font-size:11px; padding-right: 30px; }
#search input:focus{ border: 1px solid #acacac;}
#search input[type="submit"] { color: #818181; }
#search input[type="submit"]:hover{ color: #FF4949; }
#search.button { margin-left:-30px; padding:0; border:none; background: none; }
#search.button span { color:#828282; background: none; text-transform: uppercase; }
#top-cart { text-align: right; float:right; position: relative; padding:1px 20px 5px 0; background: url(images/shopping-bag.png) no-repeat top right; width:280px; line-height: 16px;}
#top-cart > a{ color:#818181;}
#top-cart.mobile-link { display: none; position: absolute; width: 100%; height: 100%; text-indent: -9999em;}
#top-cart.dark-span.amount { color:#090909; font-size: 12px;}
#top-cart.cart-popup { display:none; width:295px; text-align: left; padding:20px 15px 15px 15px; border:1px solid #acacac; background: white url(images/line3.png) repeat-x top; position: absolute; z-index:10001; right:0; top:20px;}
#top-cart.cart-popup.empty { text-align: center;}
#top-cart.cart-popup.recently-added { font-size:10px; text-transform: uppercase;}
#top-cart.cart-popup.totals.amount, #top-cart.cart-popup.totals { font-family: Verdana; clear: both; padding:5px 0; margin-bottom: 10px; font-size:14px; text-transform: uppercase; text-align: right; color:#818181; }
#top-cart.cart-popup.totals.amount{ color:#090909; }
#top-cart.amount { font-size:14px; font-weight: normal; color:#FF4949;}
#top-cart.cart-popup.totals.price { font-size:14px; font-weight: normal; color:#090909;}
#top-cart.cart-popup.button { }
#links { text-align: right; float:right; width:280px; margin-top:3px; margin-bottom: 10px;}
.links li { padding:3px 0 3px 17px; background: url(images/link-divider.png) no-repeat center left; display:inline-block;}
.links li:first-child { background: none; }
.entry-title,.page-title { font-size:24px; font-weight:normal; padding-top: 5px;color: #090909!important; }
.page-description { padding:40px 0; border:1px solid #efefef; border-right:0; border-left:0; margin:10px 0 30px 0; font-size:32px; line-height:40px; font-weight:normal; h1.notFound { font-size:48px; }
h1.notFound strong{ color: #FF4949 }
.error404 { padding:0 0 20px 0; }
Lo he intentado text-align:center
pero no he podido centrar la alineación.
Código HTML:
<header id="header">
<div id="search">
<div id="site-description"><?php bloginfo( 'description' );?></div>
<?php get_search_form();?></div>
<div class="logo">
<?php $logoimg = etheme_get_option('logo');?>
<?php if($logoimg):?>
<a href="<?php echo home_url();?>"><img src="<?php echo $logoimg?>" alt="<?php bloginfo( 'description' );?>" /></a>
<?php else:?>
<a href="<?php echo home_url();?>" class="logo-text"><?php bloginfo( 'name' );?></a>
<?php endif;?></div>
<div class="cart-wrapper">
<?php if(class_exists('Commerce') && etheme_get_option('just_catalog')!=1 && etheme_get_option('cart_widget')):?>
<a class="mobile-link" href="<?php echo wpsc_cart_item_url();?>"></a>
<div id="top-cart" class="shopping-cart-wrapper">
<?php get_template_part( 'cart_widget' );?></div>
<?php endif;?>
<?php if(class_exists('-') && etheme_get_option('just_catalog')!=1 && etheme_get_option('cart_widget')):?>
<?php global $c?>
<a class="mobile-link" href="<?php echo $c->cart->get_cart_url();?>"></a>
<div id="top-cart" class="shopping-cart-wrapper widget_shopping_cart">
<?php $cart_widget = new Cart(); $cart_widget->widget();?>
</div>
<?php endif;?></a></div>
</header>
Necesito sugerencias sobre cómo alinear al centro la imagen del logotipo.
Gracias y Saludos
Solución del problema
Elimine float
y haga el width
100% para la clase de logotipo. Eso es si desea que su logotipo llene el ancho de su página/contenedor.
.login{
width:100%;
text-align:center;
margin-bottom:10px;
}
Si tiene otros elementos/divs a ambos lados del logotipo, deberá calcular el ancho del contenedor del logotipo y hacer un archivo text-align:center
.
No hay comentarios.:
Publicar un comentario