忽略垂直弹性元素内的文本对齐

Question

类似问题的解决方案似乎不适用于我的案例，这比那些更具体，因此我认为这不是一个重复的问题。

我正在尝试对齐某些 flex 元素内的文本，但是 text-align 属性被完全忽略了。检查this jsfiddle；有问题的元素是右边的元素，编号从 1 到 3。为方便起见，注释标记了 CSS 中的相关规则。

注意我需要元素是 flex 否则它们将失去垂直对齐 and/or 它们当前的形状。

我想要的输出是这三个元素将所有可用的垂直 space 平分，占据所有可用的宽度，并且文本在每个块的中心位置，垂直和水平。

我想避免 通过填充或类似的技巧强制要求位置，我也想避免在 HTML 中添加更多标签，如果完全有可能。

Answer 1

您正在使用 align-items:center 对齐导航栏中的项目，但这只是一个方向。要在另一个方向上也执行此操作，请添加 justify-content: center.

而且你可以去掉text-align: center看看这个：

body {
    color: rgb(240, 240, 240);
    font-family: sans-serif;

    background-color: rgb(150, 150, 150);
}

#content-bar {
    background-color: rgb(0, 0, 0);

    position: fixed;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    min-width: 100%;
    height: 60%;
    left: 0;
}

#content-bar > * {
    padding: 1em;
}

#content-bar > main {
    overflow: auto;
}

#content-bar > nav {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;

    min-width: 15%;
}

#content-bar > nav > a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

<body>
  <div id="content-bar">
    <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate in arcu id ullamcorper. Pellentesque luctus ut felis vitae tempor. In dui neque, condimentum sit amet diam id, tristique interdum ipsum. In semper nisi leo, at consequat sem interdum feugiat. Proin vestibulum, turpis in tempus pellentesque, enim libero auctor libero, sit amet ultrices est felis sit amet nisl. Mauris vel mi mi. Suspendisse eleifend laoreet mi a congue. Fusce non libero in velit sodales pharetra nec in nisl. Phasellus elementum a odio eu sodales. Nunc luctus, est non pellentesque tristique, nibh mi pulvinar tellus, ut tincidunt dolor eros at leo. Donec varius dolor eget quam aliquet varius. In at iaculis est. Proin at purus sed ligula tincidunt ullamcorper sit amet a elit. Duis mollis lacinia mi, non aliquam arcu pulvinar ac. Aenean quis imperdiet lorem.</p>
    </main>

    <nav>
      <a href="#">Element 1</a>
      <a href="#">Element 2</a>
      <a href="#">Element 3</a>
    </nav>
  </div>
</body>

忽略垂直弹性元素内的文本对齐

Text-align inside vertical flex element ignored

css

text-align

centering

flexbox