Recently, I've come across two cases where I have two items separated either by a vertical line | or a bullet *.

Here is one of the cases with an arrow pointing at the bullet:

Example of question

So my question is, how should this be aligned - should the bullet be aligned with the horizontal center of the view (so that one item stretches more to the side than the other one), or should the entire row be horizontally aligned (so that now the dividing bullet is off center)?

  • Maybe I'm overthinking the context but why did you separate the 2 navigation areas? What's behind the difference in priority and hierarchy?
    – Pdxd
    Mar 28, 2014 at 14:19
  • 3
    Change "Website" to "Go to Website" and the text lengths are so close it won't matter which way you align it :)
    – 17 of 26
    Mar 28, 2014 at 16:41
  • 1
    @17of26 that's actually not a bad idea - grammatically, they're not equal right now, since one is an action phrase and the other's a noun.
    – iBelieve
    Mar 28, 2014 at 19:22

2 Answers 2


Your screenshot is the best answer.

  • Emphasize structure: About | Credits is horizontally aligned by the |
  • Emphasize content: Report a Bug * Website is horizontally aligned by entire row

The entire row should be horizontally aligned, as shown. The overall look and feel is better that way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.