1

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>

ロゴ画像を中央揃えにする方法について提案が必要です。

ありがとうございます。それでは、お元気で

4

2 に答える 2

0

サイトの URL を教えていただけますか。サイトでロゴがどのように配置されているかを確認する必要があります。通常、すべてのメニュー項目 (ul>li) を 2 つに分割する必要があります。6 つのメニューがあるとします。そのためには、最初の項目を左に揃えてから、4 番目のメニューを右に移動します。これにより、中央にロゴ用のスペースができます。

次に、css ルールでロゴを中央に移動します: left:10% (% はレスポンシブになります。10px を使用することもできます)。

サイトの URL を提供していただければ、正確なルールを提供できます。

于 2013-11-26T13:44:35.090 に答える
0

を削除してfloat、widthロゴ クラスを 100% にします。これは、ロゴをページ/コンテナの幅いっぱいに表示したい場合です。

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

ロゴの両側に他の要素/div がある場合は、ロゴ コンテナーの幅を計算し、text-align:center.

于 2013-10-13T12:14:56.253 に答える