在 Wordpress 模板上居中徽标答案

【问题标题】：Centring logo on Wordpress template在 Wordpress 模板上居中徽标
【发布时间】：2015-02-14 07:21:24
【问题描述】：

我正在做一场噩梦，试图将徽标放在 WP 模板的标题中。任何人都可以计算出以下代码并将徽标居中吗？

CSS

/**
   * Header
     * --------------------------------------------------------------------------- */
#header {
  padding-top: 3em;
  margin-bottom: 2.5em; }
  #header #branding {
    *zoom: 1;
    max-width: 80%;
    display: inline-block;
    text-align: left; }
    #header #branding:before, #header #branding:after {
      content: " ";
      display: table; }
    #header #branding:after {
      clear: both; }
  #header #site-title {
    display: inline-block;
    margin: 0;
    font-size: 2.25em;
    text-align: left; }
    #header #site-title a {
      display: inline-block;
      text-align: inherit; }
    #header #site-title img {
      display: block;
      text-align: inherit;
      margin: 0 auto;
      vertical-align: baseline; }
  #header.with-woocommerce #branding {
    max-width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 2em; }
  #header.with-woocommerce #site-title {
    text-align: center; }
    #header.with-woocommerce #site-title a {
      display: block; }

PHP

<header id="header" class="<?php echo $hclass; ?>">

            <hgroup id="branding">
                <h1 id="site-title" role="logo">
                    <a href="<?php echo trailingslashit( esc_url( home_url() ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
                        <?php if ( get_theme_mod( 'bearded_logo' ) ) : ?>
                            <img src="<?php echo esc_url( get_theme_mod( 'bearded_logo' ) ); ?>" alt="<?php bloginfo( 'name' ); ?>" />
                        <?php else : bloginfo( 'name' ); endif; ?>
                    </a>
                </h1>
                <h2 id="site-description" class="hide-for-small"><?php bloginfo( 'description' ); ?></h2>
            </hgroup><!-- #branding -->


            <hgroup id="navigation" role="navigation" >             

                <?php do_atomic( 'before_nav' ); ?>

                <?php get_template_part( 'menu', 'primary' ); // Loads the menu-primary.php template. ?>

                <?php do_atomic( 'after_nav' ); ?>
            </hgroup>


        </header><!-- #header -->

请帮忙。谢谢 - 任何建议将不胜感激！

【问题讨论】：

你能把我们链接到这个网站吗？检查站点比阅读此处的代码要容易得多。

标签： php css wordpress image center

【解决方案1】：

添加到 CSS：

#site-title img {
    margin-left: 45%;
}

【讨论】：

【解决方案2】：

根据您最近对网站所做的更改，您可以将其添加到徽标的中心

#header #branding, #header.with-woocommerce #branding {
  display: table;
  margin: 0 auto;
}

如果您返回到商店导航不是全宽的位置，我会将标题位置设为相对位置，并将商店导航右上角的绝对位置设为 0。

【讨论】：

我恢复到原来的样子以避免混淆。我决心解决这个问题。就像现在的代码一样，我该怎么做才能使徽标居中并避免商店导航位于其下方？谢谢。感谢您的帮助。

【解决方案3】：

给 id="site-title" 左边距：43%

【讨论】：

如果徽标要改变大小，这将是不可靠的。 margin: 0 auto 更可靠。