Centering and positioning elements in one row

Question

I have a question about centering and positioning elements behind each other. I have a block of text on the left and only one word in this case, which should be centered on the same line as the email.

nav { text-align: center; } 

 <address> <a href="#">Some text</a> <br> hi(at)mail.com </address> <nav> <a href="#">about</a> </nav> 

I tried to put the address to the left, but then the navigator is no longer in the center. Any ideas how to do this? It should be easy, but I just don't know how to do it.

Edit

The navigator should be centered for the whole viewport, my current answer will be in the absolute position of the navigator and set to left and right to 0., but I do not know if this was the best way to do this.

how it should look:

Answer 1

I don't know if this is the best way, but it looks like you want to do

 nav { left:50%; text-align: center; } address{ float:left; } 

 <address> <a href="#">Some text</a> <br> hi(at)mail.com </address> <nav> <br/> <a href="#">about</a> </nav> 

Answer 2

Consider using display:table-cell . This way we can vertically align the contents at the bottom of the container element.

HTML:

 <div class="container"> <address> <a href="#">Some text</a> <br> hi(at)mail.com </address> <nav> <a href="#">about</a> </nav> </div> 

CSS: (Edited to include 50% width on table elements)

 .container{ display:table; width:100%; } address, nav{ display:table-cell; vertical-align:bottom; width:50%; } 

Take a look at codepen here: http://codepen.io/eoghanTadhg/pen/NNYgYg

Answer 3

I wanted to show you this solution because it combines a couple of ideas that are sometimes considered problematic. Here I use the fact that, by default, elements of an inline block are vertically aligned along the last line of their contents. That's what you need. In addition, it uses a visible zero-width block overflow to center the contents of the navigator horizontally inside the containing block.

 nav { text-align: center; display:inline-block; width:100%; margin-left:-0.25em; } address { display:inline-block; width:0; } address > * { white-space: nowrap; } 

 <address> <a href="#">Some text</a> <br> <span>hi(at)mail.com</span> </address> <nav> <a href="#">about</a> </nav>