将 Flex 列中的文本水平居中答案

【问题标题】：Centering Text in a Flex Column Horizontally将 Flex 列中的文本水平居中
【发布时间】：2021-11-09 06:03:44
【问题描述】：

我目前正在学习如何编写汉堡菜单。我想让它在一行中的指定列的中心对齐，我正在尝试对导航中的链接做同样的事情。但是，我无法使链接正确居中。以下是我到目前为止的代码：

.grid-container {
     display: grid;
     grid-template-areas: "header menu";
     grid-template-columns: repeat(8, 1fr);
}

.header {
    grid-area: header;
    grid-column: span 7;
    margin: 2px;
    background-color: black;
}

.nav-test {
     display: flex;
     direction: row;
     justify-content: space-around;
     list-style-type: none;
}

.nav-test a {
    color: white;
 }

.menu {
    display: flex;
    grid-area: menu;
    grid-column: span 1;
    margin: 2px;
    background-color: black;
}

<div class="grid-container">
  <div class="item header">
    <ul class="nav-test">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Music</a></li>
      <li><a href="#">Tours</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="item menu"></div>
</div>

我的目标是对最后一列中的汉堡菜单做同样的事情。为了使标题正确居中，我忘记设置什么？

【问题讨论】：

你到底想要什么。不是很清楚。请尽可能准确。

标签： html css web

【解决方案1】：

默认情况下，浏览器会向ul 元素添加左填充，这会将nav-test 列表的内容推到上面。

最简单的解决方案是重置填充：

.nav-test {
   padding-left:0px; /* add this */
   display: flex;
   direction: row;
   justify-content: space-around;
   list-style-type: none;
}

【讨论】：

【解决方案2】：

如果您检查 nav-test 容器，您会发现容器左侧有一个额外的 40px 填充。这就是您的链接未居中的原因。要解决此问题，只需在您的导航测试类中添加padding-left: 0;。尝试运行 sn-p 看看这是否能为您解决问题。

.grid-container {
   display: grid;
   grid-template-areas: "header menu";
   grid-template-columns: repeat(8, 1fr);
}

.header {
   grid-area: header;
   grid-column: span 7;
   margin: 2px;
   background-color: black;
}

.nav-test {
   display: flex;
   direction: row;
   justify-content: space-around;
   list-style-type: none;
   padding-left: 0;
}

.nav-test a {
   color: white;
 }
.menu {
   display: flex;
   grid-area: menu;
   grid-column: span 1;
   margin: 2px;
   background-color: black;
}

<!doctype html>
<html>
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
        href="menu_design.css">

    <head>
        <div class="grid-container">
            <div class="item header">
                <ul class="nav-test">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Me</a></li>
                    <li><a href="#">Music</a></li>
                    <li><a href="#">Tours</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="item menu"></div>
        </div>
    </head>
</html>

【讨论】：

【解决方案3】：

如您所见，您的 Nav 有一些 li 标签位于父标签 ul 内，因此您可以在父元素集 display: flex; 和 justify-content: space-around; 或 justify-content: space-between; 中将每个元素居中你的导航栏

.grid-container {
   display: grid;
   grid-template-areas: "header menu";
   grid-template-columns: repeat(8, 1fr);
}

.header {
   grid-area: header;
   grid-column: span 7;
   margin: 2px;
   background-color: black;
}

.nav-test {
   display: flex;
   direction: row;
   justify-content: space-around;
   list-style-type: none;
   padding-left: 0;
}

.nav-test a {
   color: white;
 }
.menu {
   display: flex;
   grid-area: menu;
   grid-column: span 1;
   margin: 2px;
   background-color: black;
}

<!doctype html>
<html>
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
        href="menu_design.css">

    <head>
        <div class="grid-container">
            <div class="item header">
                <ul class="nav-test">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Me</a></li>
                    <li><a href="#">Music</a></li>
                    <li><a href="#">Tours</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="item menu"></div>
        </div>
    </head>
</html>

【讨论】：