Solutions to similar questions don't seem to work for my case, which is more specific than those, therefore I don't think this is a duplicate question.
I'm trying to align the text inside some flex elements, but the text-align property is being ignored completely. Check this jsfiddle; the elements in question are the ones on the right, numbered from 1 to 3. A comment marks the relative rule in the CSS for your convenience.
Note that I need the elements to be flex or else they will lose the vertical alignment and/or their current shape.
My desired output is that the three elements split all the available vertical space equally amongst themselves, occupy all available width, and have the text in central position of each block, both vertically and horizontally.
I would like to avoid forcing the desired position through padding or similar artifices, and I would also like to avoid having to add more tags in the HTML if at all possible.
You are aligning the items in the nav bar by using align-items:center, but this is only in one direction. To also do this in the other direction add justify-content: center.
And you can get rid of text-align: center Take a look at this:
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>