Before this gets down-voted into oblivion, let me mention that I have thoroughly searched through numerous similar questions on SO. However, none of them provided a solution to my specific issue.
I am using flexbox to align <p> tags both horizontally and vertically within an element. My goal is to center the <p> elements themselves, not just the text inside them.
.app-outer {
display: flex;
flex-direction: column;
}
.app {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
align-items: center;
}
.app p {
display: inline-block;
}
.title-bar {
background-color: #202225;
color: #72767D;
font-weight: bold;
padding: 0 0 2px 8px;
display: flex;
flex-direction: row;
width: 100%;
}<div class="app-outer">
<div class="title-bar">
<span class="draggable">Skipwars</span>
<span class="btns">
<button id="btn-minimize" tabindex="-1">-</button><!--
--><button id="btn-close" tabindex="-1">×</button>
</span>
</div>
<div class="app">
<p>Add a browser source pointed at <!--<a href="#">http://localhost:3333/</a>--></p>
<p>
Optional parameter <code style="display:inline">threshold=n</code>. ex: <a
href="#">http://localhost:3333/?threshold=4</a> (default 8)
</p>
</div>
</div>My app has a fixed width of 300px (I am using electron).
https://i.sstatic.net/56Lft.png
If the paragraph content does not span multiple lines, it works perfectly. However, when there is enough text to wrap to subsequent lines, the paragraph expands to the width of the .app container, leaving the text left-aligned.
This screenshot illustrates the desired outcome:
https://i.sstatic.net/a6vRH.png
I initially believed that setting the paragraphs' display property to inline-block would resolve the issue, but unfortunately, it did not.