无论如何都无法使用CSS对header图片进行居中

我正在使用添加了图片标题(带有我们的徽标)的主题。我将此图像称为” https://www.londonim.co.il/wp-content/uploads/2019/04/logo.jpg”。网站地址为https://londonim.co.il-位于希伯来语(无论如何)。

” logo.jpg”所在的div从那里继承了一些显示内容(我认为是” block”), 我非常希望它居中。

为了尝试使其居中, 我使用了25％的边距, 但是当在较大的屏幕上显示时, 它不会保持其中心对齐(除非在全屏模式下)。当我使用包装的显示属性进行调整时, 它通常会消失或完全失去对齐。有什么想法吗？

主题标题：

<div class="cutewp-container" id="cutewp-header" itemscope="itemscope" itemtype="http://schema.org/WPHeader" role="banner">
    <div class="cutewp-head-content clearfix" id="cutewp-head-content">
        <div class="cutewp-outer-wrapper">
            <div class="cutewp-header-inside clearfix">
                <div id="cutewp-logo">
                    <div class="site-branding">
                        <a href="https://www.londonim.co.il/" rel="home" class="cutewp-logo-img-link">
                            <img src="https://www.londonim.co.il/wp-content/uploads/2019/04/logo.jpg" alt="" class="cutewp-logo-img">
                        </a>
                    </div>

我的调整：

/* homepage tweaks */
.cutewp-main-wrapper {
    position:relative!important; 
    margin-left:12.5%;
    margin-right:12.5%; 
}

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


#cutewp-primary-navigation {
    text-align: center;
    text-align: -webkit-center;
}

#cutewp-header {
    text-align: center;
    text-align: -webkit-center;
}
.menu-main-container {
    margin-left: 25%;
}

先谢谢你的帮助！

#1

最好的解决方案是：

#cutewp-logo {
  margin-left:25%;//delete this
  margin-right:25%;//delete this
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;//delete this
  width: 100vw;//add this
}

元素未居中, 因为它不占据屏幕的整个宽度, 因此没有参考可居中

#2

你需要清除其中一些左边距和右边距

更改

#cutewp-logo {
    margin: 5px 0px 5px 0px;
    float: left;
    width: 41%;
}

.cutewp-main-wrapper {
    position: relative!important;
    margin-left: 12.5%;
    margin-right: 12.5%;
}

@media only screen and (max-width: 890px) {
    #cutewp-header {
        margin-left: 25%;
        background-color: white;
    }
    .cutewp-content-wrapper {
        margin-left: 25%;
    }
}

TO

#cutewp-logo {
    margin: auto;
}

.cutewp-main-wrapper {
    position: relative!important;
}


@media only screen and (max-width: 890px) {
    #cutewp-header {
        background-color: white;
    }
    .cutewp-content-wrapper {
        margin: auto;
    }
}

这将解决你的桌面和移动视图上的问题。