Question

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

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

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

我希望得到的输出是，这三个元素将所有可用的垂直空间平均分配，占据所有可用的宽度，并使文本在每个块的中心位置（垂直和水平方向）

我想避免通过填充或类似技巧将其强制设置为所需的位置，并且我也希望避免在可能的情况下在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>

垂直flex元素内的文本对齐被忽略

1 个答案: