Question

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

“ logo.jpg”所在的div从那里继承了一些显示（我认为是“块”），我非常希望它居中。

为了尝试使其居中，我使用了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

最好的解决方案是：

        document.getElementById("forminfo").innerHTML  = "<div class='img-magnifier-container'>";
            document.getElementById("forminfo").innerHTML += "<img id='myimage' src='images/Gashats/"+ItemImage+"' width='135em' align='left';/>";
        document.getElementById("forminfo").innerHTML += "</div>";
        document.getElementById("forminfo").innerHTML += "<h3 class='texthilight'>"+ItemAdPrefix+" "+ItemAd+" "+RiderClass+" LVL "+ItemLevel+"</h3>";
        document.getElementById("forminfo").innerHTML += "<b><?=ucwords($GimickName);?></b> "+ItemName+"</br>";
        document.getElementById("forminfo").innerHTML += "<b>Genre</b> "+GenreAd+"</br>";
        document.getElementById("forminfo").innerHTML += "<b>Power</b> x"+PowerLevel+"<!-- (Sentai is x1,000)--></br>";
        document.getElementById("forminfo").innerHTML += "<b>Armor</b> x"+ArmorLevel+"<!-- (Sentai is x5)--></br>";
        document.getElementById("forminfo").innerHTML += "<b>Weapon</b> "+EquipmentAd+"</br>";
        document.getElementById("forminfo").innerHTML += "<div id='quotesbox'><b>Quotes</b></br>";
            document.getElementById("forminfo").innerHTML += QuoteLinks;
            document.getElementById("forminfo").innerHTML += "<div id='quotesbody' style='height:1.8em; margin-left: 5.3em; margin-right: 5em; background-color: rgba(156, 186, 221, .6);'><i>--click the links above--</i></div>";
        document.getElementById("forminfo").innerHTML += "</div></br></br>";

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

Answer 2

您需要清除其中的一些margin-left和margin-right

更改

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

这将在您的桌面视图和移动视图中解决此问题。

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

2 个答案: