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

【问题标题】：Text-align inside vertical flex element ignored忽略垂直弹性元素内的文本对齐
【发布时间】：2019-07-26 04:33:00
【问题描述】：

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

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

注意，我需要元素为flex，否则它们将失去垂直对齐和/或当前形状。

我想要的输出是三个元素在它们之间平均分配所有可用的垂直空间，占据所有可用宽度，并将文本置于每个块的中心位置，垂直和水平。

我想避免通过填充或类似的技巧强加所需的位置，并且我还想尽可能避免在 HTML 中添加更多标签。

【问题讨论】：

标签： css flexbox centering text-align

【解决方案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>

【讨论】：

Ack，我确信我已经尝试过这个，但它一定是与其他一些因素的组合。非常感谢。