Question

我对使用CSS网格是陌生的，我正在尝试使用flexbox在一个网格单元中定位两个项目。左侧有一个徽标，右侧有一个导航栏，但是导航栏不在单元格“ a”内居中，它似乎位于单元格“ a”的下边界下方（我尝试上传jpeg图像，但Stack Overflow目前在接受图片上传时遇到问题，请参见Image upload fails with "imgur is rejecting the request"）。

这是html代码：

<div class="a">

<div class="a_left">
Logo for Project
</div>

<div class="a_right">
<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>
</div>

</div>

这是CSS代码：

.a{
    display: grid;
    font-family: sans-serif;
    color: green;
    font-size: 16pt;
}

.a_left{
    display: flex;
    text-align: left;
    vertical-align: left;
    flex-wrap: nowrap;
}

.a_right{
    display: flex;
    height: 100%;
    flex-wrap: nowrap;
    justify-content: right;
    vertical-align: right;
}

.topnav {
    align-content: right;
    justify-content: center;
    overflow: hidden;
    background-color: #333;
    height: 100%
}

网格容器为“ a”，导航栏位于a_right flexbox中。我尝试了很多可能的height，width和centering属性，但均未成功，但我不知道该属性应应用于a还是a_right。

感谢您对导航栏居中的任何帮助。

Answer 1

如果要在左侧显示徽标，在右侧显示菜单，只需执行以下操作：

.a {
  display: flex;
  justify-content: space-between;
}

<div class="a">
  <div class="a_left">
    Logo for Project
  </div>
  <div class="a_right">
    <div class="topnav">
      <a class="active" href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>
  </div>
</div>

Answer 2

Flexbox是用于将其子对象居中的容器-现在看来，您正在将子对象放入flexbox中，这不会给您带来很多好处。

如果您需要维护“网格”显示属性，请为徽标和导航栏添加一个容器。这是display:flex所需要的容器，并且是将与flex相关的对齐方式属性应用到的容器。

此外，要在Flexbox中垂直对齐内容，请使用align-items。水平对齐需要justify-content。

Answer 3

因此，您将元素.a设置为网格容器：

.a {
    display: grid;
}

…，您想知道为什么子级（.a_left和.a-right）垂直堆叠而不是在同一行上。

原因是您尚未使用grid-template-columns或grid-template-areas定义显式轨道。因为您尚未定义显式列，所以grid-auto-columns可以用来创建隐式列。

grid-auto-columns的默认值为auto，这实际上允许每个网格项占据整行。那就是你所看到的；就像块元素堆叠一样。

尝试以下方法：

.a {
  display: grid;
  grid-template-columns: auto 1fr; /* define explicit columns */
  color: green;
  font-size: 16pt;
}

.a_left {
  display: flex;
}

.a_right {
  display: flex;
  justify-content: center;
}

.topnav {
  background-color: yellow;
}

<div class="a">
  <div class="a_left">Logo for Project</div>
  <div class="a_right">
    <div class="topnav">
      <a class="active" href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>
  </div>

您可能还想阅读这篇关于将元素居中放置在具有其他元素的行上的信息：Center and right align flexbox elements

CSS网格单元中的Flexbox项似乎已包裹

3 个答案: