Question

我想将我的wordpress主题的徽标图像居中对齐，我试图这样做但失败了;

这是标题区域的CSS

/* 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; }

我已尝试text-align:center但未能居中对齐。

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>

我需要有关如何对齐徽标图像的建议。

由于此致

Answer 1

删除float并为徽标类设置width 100％。也就是说，如果您希望您的徽标填满页面/容器的宽度。

.login{
   width:100%;
   text-align:center;
   margin-bottom:10px;
}

如果徽标两侧有其他元素/ div，则需要计算徽标容器的宽度，然后执行text-align:center。

Answer 2

您是否可以提供您的网站网址，我必须在网站上查看徽标的对齐方式。通常，您需要做的是将所有菜单项（ul> li）拆分为两个。让我们假设您有6个菜单，为此，将第一个项目对齐到更左侧，然后将第4个菜单更右侧移动，这样您就可以在中间留出徽标空间。

现在通过css规则将你的徽标移到中间：左：10％（％会使它响应，你也可以使用10px）。

如果您可以提供网站网址，我可以为您提供准确的规则。

如何在Wordpress主题中居中对齐徽标图像？

2 个答案: