如何修復flexbox不完全居中？[復制]-有解無憂

這個問題在這里已經有了答案：如何修復 flexbox 不完全居中？[復制]

在這張圖片中，我有完美的頂部元素，但測驗元素不會中心元素不會正確對齊。我該如何解決這個問題，使其居中？

頂欄的類是 panelHeader 未對齊的類是 panelContent 整個面板類是 panel

CSS：

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,100;1,400&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: 'Lato', sans-serif;
}

main {
    background: linear-gradient(to left top, rgba(87, 171, 235, 0.6), rgba(87, 171, 235, 0.9));
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel {
    background: linear-gradient(to right bottom, rgba(255,255,255,0.8), rgba(255,255,255, 0.3));
    min-height: 90vh;
    width: 95%;
    background: linear-gradient(to right bottom, rgba(255,255,255,0.7), rgba(255,255,255, 0.3));
    border-radius: 2rem;
    z-index: 2;
    backdrop-filter: blur(2rem);
    display: flex;
    justify-content: center;
}


.panelHeader {
    display: flex;
    justify-content: center;
    font-size: 40px;
    padding-top: 20px;
    animation: 0.45s ease-in 0s 1 slideInTop;
}

.panelContent {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes slideInTop {
    0% {
      transform: translateY(-20%);
    }
    100% {
      transform: translateY(0);
    }
  }

謝謝！

編輯

有人問我的HTML，所以在這里：


<!DOCTYPE html>
<html>
    <head>
        <title>Tyler TV: Streaming</title>
        <link rel="stylesheet" href="styles.css" />
    </head>

    <body>
        <main>
            <section class="panel">
                <div class="panelHeader">
                    <h1>Tyler TV.  Stream Today, Watch Tommorow.</h1>
                </div>
                <div class="panelContent">
                    <h1>test</h1>
                </div>
            </section>
        </main>

        
    </body>
</html>

uj5u.com熱心網友回復：

您添加了 display flex 以使用 nowrap 選項包裝容器。

您需要添加到 .panel { flex-wrap: wrap;} 選項，或 { flex-direction: column;}

uj5u.com熱心網友回復：

默認情況下，flex box 設定為flex-direction: row，您需要將 main 設定.panel為 column，

.panel {
    background: linear-gradient(to right bottom, rgba(255,255,255,0.8), rgba(255,255,255, 0.3));
    min-height: 90vh;
    width: 95%;
    background: linear-gradient(to right bottom, rgba(255,255,255,0.7), rgba(255,255,255, 0.3));
    border-radius: 2rem;
    z-index: 2;
    backdrop-filter: blur(2rem);
    display: flex;
    justify-content: center;
    flex-direction: column;
}

如果您不需要垂直對齊，justify-content: center請移除.panel

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/469192.html

標籤：html css 弹性盒结盟

上一篇：在具有自定義標題欄的同時移動視窗并且它不會捕捉到游標的角落

下一篇：子選單的回應式媒體查詢