Menu
i have a question about centering and positioning elements behind one another. I have a block of text on the left and only one word in this case about, which should be centered and on the same line as the e-mail.
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 float the address to the left, but then the nav isn't in the center anymore. Any ideas how to accomplish this? It has to be easy, but i just don't know how.
Edit
The nav should be centered for the entire viewport, my current answer would be to absolute position the nav and set left and right to 0. but i don't know if this would be the best way to do it.
what it should look like:
949
For vertical alignment, set the parent element's width / height to 100% and add display: table . Then for the child element, change the display to table-cell and add vertical-align: middle . For horizontal centering, you could either add text-align: center to center the text and any other inline children elements.
Static positioning is the default that every element gets. It just means "put the element into its normal position in the document flow — nothing special to see here."
Fixed positioning This can be used to create a "floating" element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left.
I dont know if it is the best way but it looks like what 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
