对类似问题的解决方案似乎对我的情况不起作用，这比这些问题更具体，因此我认为这不是一个重复的问题。
我正在尝试将文本对齐一些弹性元素，但是text-align属性被完全忽略了。检查此JSFIDDLE；所讨论的元素是右边的元素，从1到3。
NOTE 我需要flex的元素，否则它们会失去垂直对齐和/或当前形状。
我所需的输出是，这三个元素将所有可用的垂直空间平均彼此分配，占据所有可用的宽度，并在每个块的中心位置，无论是垂直和水平的。
。我想避免通过填充或类似的工件强迫所需的位置，如果可能的话，我也想避免在HTML中添加更多标签。
<</p>您使用align-items:center在NAV栏中对齐项目，但这仅在一个方向上。还可以在另一个方向添加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>