I need help with aligning text in a toolbar-like control. The left side contains variable-size text, the center has a small block of text, and the right side also has text.
My goal is to always have the center text centered without knowing its width in advance. The left and right sides should expand to fill available space and then wrap if needed.
I've attempted various methods but none seem to work as intended. Here's what I've tried:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<br/>
not centered:
<div class="d-flex justify-content-between">
<div class="border">
left left left left left left left left left left left left
</div>
<div class="border">
center
</div>
<div class="border">
right
</div>
</div>
<br/>
not on the same line:
<div class="d-flex flex-column">
<div class="border align-self-start">
left left left left left left left left left left left left
</div>
<div class="border align-self-center">
center
</div>
<div class="border align-self-end">
right
</div>
</div>
<br/>
left does not fill space up to the center content:
<div class="container row">
<div class="col border">
left left left left left left left left left left left left
</div>
<div class="col border text-center">
center
</div>
<div class="col border text-right">
right
</div>
</div>Feel free to run the snippet for a better understanding of my issue. Any suggestions on how to properly center the text while accommodating variable widths would be greatly appreciated!