如何在没有弯曲的情况下在中间对齐项目？ [复制]答案

【问题标题】：How to align Item in the middle without flex? [duplicate]如何在没有弯曲的情况下在中间对齐项目？ [复制]
【发布时间】：2021-08-15 06:53:43
【问题描述】：

我正在尝试使用 flex 对齐标题文本。但是对齐方式并没有按照我的预期进行。

这是博客和关于的两张图片。

这些项目使用空格对齐。

container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
} 
// btw, I am using material-ui class

但是，Blog和About文字的位置是不同的，因为链接文字和三点图标的大小和元素不同。

如何将文本 Blog 定位到与 About 相同的位置？

【问题讨论】：

那个选择器真的有用吗？ container: 不是有效的选择器。此外，发布的图像不是很有用，因此也包括相关的 HTML。事实上阅读如何制作minimal reproducible example。
复制覆盖flexbox和css网格解决方案
@zer00ne 我没有展示 material-ui css 支持的 makeStyles 的完整用法

标签： html css

【解决方案1】：

您可以使用网格制作 3 个均匀的列，然后它不会关心元素之间的均匀间距，而是将它们保持在您想要的位置。

然后将文本居中对齐为中间列，右侧为右列。

.container{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
}

.center-div{
    text-align: center;
}

.right-div {
    text-align: right;
}

【讨论】：

好。我可以使用 material-ui 支持的网格

【解决方案2】：

您是否尝试过引导水平对齐。以 .justify-content-center 为中心：

https://getbootstrap.com/docs/4.0/components/navs/

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

【讨论】：

【解决方案3】：

位置：绝对，边距：自动；

另一种使用 flex 的替代方法，您可以在三个点所在的位置添加一个类似于 "" 的空元素（虚拟元素），因此它将与另一个具有相同的相对中心，您可以在 Back to 添加一些填充即将使其与返回博客列表的宽度相同。

希望这会有所帮助。

【讨论】：