CSS: Center Multiple Lines on a Shared Character

In my work sprucing up College Hill Creative’s homepage, I discovered something that bothered me at the bottom of each page. The roster was formatted like so:

<p style="text-align: center">
    Name Number One | Title Number One<br/>
    Slightly Shorter | Shorter Title<br/>
    Tiny | Tiny<br/>
</p>

It rendered like this:

Name Number One | Title Number One
Slightly Shorter | Shorter Title
Tiny | Tiny

The fact that the text wasn’t centered on the pipes bothered me significantly, and I went to work trying to fix the issue.

My initial searches led me to attempt to maintain whitespace inside of the p element. This got close, but was too finicky and lacked precision. After spending some additional time trying in vain to solve the problem on my own, I reached out to the devICT Slack channel for help.

Barrett Morgan offered the following suggestion:

@jmmoore you might try wrapping each side of the pipe in divs that are 50% wide. Then right aligning one side and left aligning the other…

He provided some sample code as well:

It rendered relatively close to the way I wanted but the centering still wasn’t exactly where I wanted it to be. However, I took his suggestions and spent some time trying different margin combinations. After some experimentation, putting the pipe character inside its own classed div did the trick.

The final version that works is on JSFiddle, embedded below:

This doesn’t strike me as a particularly elegant solution, so if you have solved this problem in a different way, please reach out to me on Twitter!