Невозможно центрировать изображение заголовка с помощью CSS, несмотря ни на что

Question

Я использую тему, к которой я добавил заголовок изображения (с нашим логотипом). Я назвал это изображение "https://www.londonim.co.il/wp-content/uploads/2019/04/logo.jpg". адрес веб-сайта https://londonim.co.il - он на иврите (независимо).

Div, в котором находится "logo.jpg", наследует некоторый дисплей оттуда (я думаю, "блок"), и я бы очень хотел, чтобы он был отцентрирован.

Чтобы попытаться отцентрировать его, я использовал поля в 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%;
}

Заранее спасибо за помощь!

Answer 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
}

Элемент не центрируется, потому что он не занимает всю ширину экрана, поэтому не имеет ссылки на центрирование по

Answer 2

Вам нужно очистить некоторые из этих margin-left и margin-right

CHANGE

#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%;
    }
}

К

#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;
    }
}

Это решит проблему как на рабочем столе, так и на мобильном экране.