Question

当我尝试在flexbox中居中放置文本时，居中但在底部。如何在div的中间居中？我尝试在flexbox-container div的div顶部栏中和菜单中居中放置文本。很抱歉提出如此愚蠢的问题，我在Google上搜索仍然找不到解决方法。

<!DISCODE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>Piotr Nowak - Portfolio</title>
    <meta name="description" content="piotr nowak, programista backendowy freelancer" />
    <meta name="keywords" content="programista, backend, freelancer, portfolio, web" />
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> 
</head>
<body>
    <div class="flexbox-container">
        <header>
            <div class="topbar">
                <h1>ZlotyKot Trafika</h1>
            </div>
        </header>
        <nav>
            <div class="menu">
                <p> Aktualności Oferta Nowości i promocje Punkt kurierski Zaprzyjaźnione miejsca Fotogaleria Kontakt O nas </p>
            </div>
        </nav>
    </div>
</body>
</html>

body
{
    font-family: 'Abel', sans-serif;
    margin: 0 auto;
}

.flexbox-container
{
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: flex-center;
}

.flexbox-container div.topbar
{
    background-color: #008000;
    height: 15vh;
    text-align: center;
    font-size: 150%;
    color: yellow;
}

.flexbox-container div.menu
{
    height: 5vh;
    background-color: #228B22;
    collor: yellow;
    text-align: center;
    padding-top: 2px;
}

Answer 1

您使用的属性值无效

justify-content: flex-center;

这是最近的匹配项。

justify-content: center;

有关更多属性，请转到MDN。

Answer 2

在justify-content: center;内使用.flexbox-container并删除p边距

.flexbox-container div.menu p{
  margin: 0;
}

这里工作的codepen example

如何在Flexbox中居中放置文本

2 个答案: