css - 不能在不丢失 Logo 高度的情况下将标题和菜单居中

Question

我试图将此响应式 CuteWP 主题的标题和顶部菜单居中，但无济于事。 网址:https://www.londonim.co.il/

到目前为止，我取得的最佳效果是让 Logo 变小，无论如何我都无法“强制”调整图像的高度。这是我使用的代码:

.cutewp-header-inside {
  float: none;
  display: inline-block;
}

另一个不好的结果是使用 Logo 的绝对位置:

.cutewp-header-inside {
  position: absolute !important;
}

它使 Logo 与主菜单重叠并且也很小。

同时使用 margin-left: 25% 和 margin-right: 25% 根本不是居中，只是接近居中。

接下来，我也找不到任何使菜单居中的方法。请注意，这是一个希伯来语网站，因此显示从左到右的文本很尴尬。

有问题的Top菜单代码(显示的菜单实际上是二级菜单)定义:

   .cutewp-secondary-menu-container-inside{position:relative;}
   .cutewp-nav-secondary:before{content:" ";display:table}
   .cutewp-nav-secondary:after{clear:both;content:" ";display:table}
   .cutewp-nav-secondary{float:none;background:#f8f8f8;border-bottom:1px solid #e5e5e5;}
   .cutewp-secondary-nav-menu{line-height:1;margin:0;padding:0;width:100%;list-   style:none;list-style-type:none;}
   .cutewp-secondary-nav-menu li{border-width:0;display:inline-block;margin:0;padding-bottom:0;text-align:center;}
   .cutewp-secondary-nav-menu a{border:none;color:#666666;display:block;padding:8px 15px;position:relative}
   .cutewp-secondary-nav-menu a:hover,.cutewp-secondary-nav-menu .current-menu-item > a,.cutewp-secondary-nav-menu .current_page_item > a{text-decoration:none}
   .cutewp-secondary-nav-menu .sub-menu,.cutewp-secondary-nav-menu    .children{margin:0;padding:0;left:-9999px;opacity:0;position:absolute;-webkit-transition:opacity .4s ease-in-out;-moz-transition:opacity .4s ease-in-out;-ms-transition:opacity .4s ease-in-out;-o-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out;width:190px;z-index:99;}
   .cutewp-secondary-nav-menu .sub-menu a,.cutewp-secondary-nav-menu .children a{border:1px solid #e5e5e5;border-top:none;letter-spacing:0;padding:12px 15px;position:relative;width:190px}
   .cutewp-secondary-nav-menu .sub-menu li:first-child a,.cutewp-secondary-nav-menu    .children li:first-child a{border-top:1px solid #e5e5e5;}
   .cutewp-secondary-nav-menu .sub-menu .sub-menu,.cutewp-secondary-nav-menu    .children .children{margin:-39px 0 0 189px}
.cutewp-secondary-nav-menu li:hover{position:static}
.cutewp-secondary-nav-menu li:hover > .sub-menu,.cutewp-secondary-nav-menu li:hover > .children{left:auto;opacity:1}
.cutewp-secondary-nav-menu a{font:normal normal 13px 'Patua One',Arial,Helvetica,sans-serif;line-height:1;}
.cutewp-secondary-nav-menu > li > a{text-transform:uppercase;}
.cutewp-secondary-nav-menu a:hover,.cutewp-secondary-nav-menu .current-menu-item > a,.cutewp-secondary-nav-menu .sub-menu .current-menu-item > a:hover,.cutewp-secondary-nav-menu .current_page_item > a,.cutewp-secondary-nav-menu .children .current_page_item > a:hover{background:#eeeeee;color:#000000;}
.cutewp-secondary-nav-menu .sub-menu,.cutewp-secondary-nav-menu .children{background:#f5f5f5;}
.cutewp-secondary-nav-menu .sub-menu a,.cutewp-secondary-nav-menu .children a{padding:12px 15px}
.cutewp-secondary-nav-menu .sub-menu .current-menu-item > a,.cutewp-secondary-nav-menu .children .current_page_item > a{color:#000000;}
.cutewp-secondary-responsive-menu-icon{cursor:pointer;display:none;margin-top:6px;margin-bottom:4px;margin-left:10px;text-align:left;}
.cutewp-secondary-responsive-menu-icon::before{color:#000000;content:"\f0c9";font:normal 18px/1 FontAwesome;margin:0 auto;}
.cutewp-secondary-nav-menu > li > a{border-right:1px solid #e5e5e5;}
.cutewp-secondary-nav-menu > li:first-child > a{border-left:1px solid #e5e5e5;}

.cutewp-secondary-menu-container-inside {
  position: relative;
}

.cutewp-nav-secondary:before {
  content: " ";
  display: table
}

.cutewp-nav-secondary:after {
  clear: both;
  content: " ";
  display: table
}

.cutewp-nav-secondary {
  float: none;
  background: #f8f8f8;
  border-bottom: 1px solid #e5e5e5;
}

.cutewp-secondary-nav-menu {
  line-height: 1;
  margin: 0;
  padding: 0;
  width: 100%;
  list- style: none;
  list-style-type: none;
}

.cutewp-secondary-nav-menu li {
  border-width: 0;
  display: inline-block;
  margin: 0;
  padding-bottom: 0;
  text-align: center;
}

.cutewp-secondary-nav-menu a {
  border: none;
  color: #666666;
  display: block;
  padding: 8px 15px;
  position: relative
}

.cutewp-secondary-nav-menu a:hover,
.cutewp-secondary-nav-menu .current-menu-item>a,
.cutewp-secondary-nav-menu .current_page_item>a {
  text-decoration: none
}

.cutewp-secondary-nav-menu .sub-menu,
.cutewp-secondary-nav-menu .children {
  margin: 0;
  padding: 0;
  left: -9999px;
  opacity: 0;
  position: absolute;
  -webkit-transition: opacity .4s ease-in-out;
  -moz-transition: opacity .4s ease-in-out;
  -ms-transition: opacity .4s ease-in-out;
  -o-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out;
  width: 190px;
  z-index: 99;
}

.cutewp-secondary-nav-menu .sub-menu a,
.cutewp-secondary-nav-menu .children a {
  border: 1px solid #e5e5e5;
  border-top: none;
  letter-spacing: 0;
  padding: 12px 15px;
  position: relative;
  width: 190px
}

.cutewp-secondary-nav-menu .sub-menu li:first-child a,
.cutewp-secondary-nav-menu .children li:first-child a {
  border-top: 1px solid #e5e5e5;
}

.cutewp-secondary-nav-menu .sub-menu .sub-menu,
.cutewp-secondary-nav-menu .children .children {
  margin: -39px 0 0 189px
}

.cutewp-secondary-nav-menu li:hover {
  position: static
}

.cutewp-secondary-nav-menu li:hover>.sub-menu,
.cutewp-secondary-nav-menu li:hover>.children {
  left: auto;
  opacity: 1
}

.cutewp-secondary-nav-menu a {
  font: normal normal 13px 'Patua One', Arial, Helvetica, sans-serif;
  line-height: 1;
}

.cutewp-secondary-nav-menu>li>a {
  text-transform: uppercase;
}

.cutewp-secondary-nav-menu a:hover,
.cutewp-secondary-nav-menu .current-menu-item>a,
.cutewp-secondary-nav-menu .sub-menu .current-menu-item>a:hover,
.cutewp-secondary-nav-menu .current_page_item>a,
.cutewp-secondary-nav-menu .children .current_page_item>a:hover {
  background: #eeeeee;
  color: #000000;
}

.cutewp-secondary-nav-menu .sub-menu,
.cutewp-secondary-nav-menu .children {
  background: #f5f5f5;
}

.cutewp-secondary-nav-menu .sub-menu a,
.cutewp-secondary-nav-menu .children a {
  padding: 12px 15px
}

.cutewp-secondary-nav-menu .sub-menu .current-menu-item>a,
.cutewp-secondary-nav-menu .children .current_page_item>a {
  color: #000000;
}

.cutewp-secondary-responsive-menu-icon {
  cursor: pointer;
  display: none;
  margin-top: 6px;
  margin-bottom: 4px;
  margin-left: 10px;
  text-align: left;
}

.cutewp-secondary-responsive-menu-icon::before {
  color: #000000;
  content: "\f0c9";
  font: normal 18px/1 FontAwesome;
  margin: 0 auto;
}

.cutewp-secondary-nav-menu>li>a {
  border-right: 1px solid #e5e5e5;
}

.cutewp-secondary-nav-menu>li:first-child>a {
  border-left: 1px solid #e5e5e5;
}

```
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package CuteWP WordPress Theme
* @copyright Copyright (C) 2018 ThemesDNA
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
* @author ThemesDNA <themesdna@gmail.com>
*/

get_header(); ?>

<div class="cutewp-main-wrapper clearfix" id="cutewp-main-wrapper" itemscope="itemscope" itemtype="http://schema.org/Blog" role="main">
<div class="theiaStickySidebar">
<div class="cutewp-main-wrapper-inside clearfix">

<?php cutewp_top_widgets(); ?>

<div class="cutewp-posts-wrapper" id="cutewp-posts-wrapper">

<?php if ( !(cutewp_get_option('hide_posts_heading')) ) { ?>
<?php if(is_home() && !is_paged()) { ?>
<?php if ( cutewp_get_option('posts_heading') ) : ?>
<h1 class="cutewp-posts-heading"><span><?php echo esc_html( cutewp_get_option('posts_heading') ); ?></span></h1>
<?php else : ?>
<h1 class="cutewp-posts-heading"><span><?php esc_html_e( 'Recent Posts', 'cutewp' ); ?></span></h1>
<?php endif; ?>
<?php } ?>
<?php } ?>

<div class="cutewp-posts-content">
<div class="cutewp-posts-container">

<?php if (have_posts()) : ?>

<div class="cutewp-posts">
<div class="<?php echo esc_attr( cutewp_post_grid_cols() ); ?>-sizer"></div>
<div class="<?php echo esc_attr( cutewp_post_grid_cols() ); ?>-gutter"></div>
<?php $cutewp_total_posts = $wp_query->post_count; ?>
<?php $cutewp_post_counter=1; while (have_posts()) : the_post(); ?>

    <?php get_template_part( 'template-parts/content', cutewp_post_style() ); ?>

<?php $cutewp_post_counter++; endwhile; ?>
</div>
<div class="clear"></div>

<?php cutewp_posts_navigation(); ?>

<?php else : ?>

  <?php get_template_part( 'template-parts/content', 'none' ); ?>

<?php endif; ?>

</div>
</div>

</div><!--/#cutewp-posts-wrapper -->

<?php cutewp_bottom_widgets(); ?>

</div>
</div>
</div><!-- /#cutewp-main-wrapper -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>
```

谢谢大家!

Answer 1

我已经尝试重现您的风格。 此样式不注意图像的大小，因此您的图像不居中:

#cutewp-logo { 
    margin-left: 25%;
    margin-right: 25%; 
}

所以我们可以注释这个属性并使用 display: flex 属性。现在看起来像这样。

样式:

#cutewp-header {
    clear: both;
    margin: 0 auto;
    padding: 0;
    border-bottom: none !important;
    position: relative;
    z-index: 1;
}

.cutewp-head-content {
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 98;
    background: #ffffff;
}

.cutewp-header-inside {
    padding: 10px 0;
}

#cutewp-logo {
    /*margin-left: 25%;
    margin-right: 25%;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.cutewp-logo-img-link {
    display: block;
}

.firstDiv, .thirdDiv {
    width: 100%;
    background: green;

}

HTML:

<div class="cutewp-container">
        <div class="cutewp-head-content clearfix">
            <div class="cutewp-outer-wrapper">
                <div class="cutewp-header-inside clearfix">
                    <div id="cutewp-logo">
                        <div class="site-branding">
                            <a>
                                <img src="logo.jpg"/>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
 </div>

输出: