我怎樣才能讓我的標志只在智能手機和平板電腦上居中顯示？

Question

我已經在 url sebastianpettersson.se上創建了我的平面設計作品集。 我使用的主題被 Code Interactive 稱為 Lekker。 我搜索了他們的支持論壇，但遺憾的是沒有找到解決此問題的方法。

我的問題是：當訪問者在智能手機或平板電腦上查看我的頁面時，我希望我的徽標水平居中。 當談到 css 時，我有點半新手，但嘗試使用此代碼，但遺憾的是它不起作用。

@media only screen and ( max-width: 993px ) {
    .qodef-header-logo-link
        text-align: center !important!;
    }
}

（請注意，我還使用代碼來隱藏智能手機和平板電腦上的按鈕，但我很確定它不會干擾它）。 將其發布到導致問題的櫃面。

@media only screen and ( max-width: 993px ) {
    .qodef-m-lines{
        display:none !important;
    }
}

有什么想法或建議嗎？

Answer 1

設置 width100% 和 margin-right: auto; 左邊距：自動；

@media only screen and ( max-width: 993px ) {
.qodef-mobile-header--minimal #qodef-page-mobile-header-inner .qodef-mobile-header-logo-link {
       margin-right: auto;
       margin-left: auto;
       width: 100%;
       max-width: 100%;
       min-width: 100%;
    }

}

Answer 2

您可以通過將margin-left設置為auto來使徽標居中，因為它已經使用了margin-right: auto ：

@media only screen and ( max-width: 993px ) {
    .qodef-header-logo-link
        margin-left: auto;
    }
}

Answer 3

首先，我想明確一點!important! 不工作你應該使用!important只有一個！

其次，你可以使用margin: 0 auto; 居中圖像，

三、使用flexbox：

display: flex;
justify-content: center;

提示，嘗試使用

• @media only screen and (min-width: 450px) for small devices {}
• @media only screen and (min-width: 800px) for bigger devices {}
• @media only screen and (min-width:1100px) for even bigger devices {}

Answer 4

@Robo Robok 的解決方案是通往 go 的道路。您還可以嘗試通過試驗display: flex來了解更多關於定位和布局的知識。

如果您也想更改可折疊菜單的 position，則對您的 header 進行的以下更改也將起作用：

@media only screen and (max-width: 993px) {
    #qodef-page-mobile-header {
        display: flex;
        justify-content: center;
    }
}

另外，你應該看看你的可折疊菜單沒有出現在 994px 分辨率以下。