Question

我正在做一个噩梦，试图将徽标放在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 -->

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

Answer 1

添加到CSS：

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

Answer 2

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

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

如果你回到店铺导航不是全宽的地方，我会将标题位置设为相对且绝对位置，店铺导航右上角为0.

Answer 3

给id =“site-title”一个左边距：43％

在Wordpress模板上居中徽标

3 个答案: