Menu
I have a user logged-in header which shows a greeting, a thumbnail of the user's profile picture (always a fixed size - 30x30) and a logout link. There are vertical separators between each piece of text and the photo.
<span>Hello [username]</span>
<span class="divider"></span>
<img src="/photo.jpg" />
<span class="divider"></span>
<a href="/logout">Logout</a>
Here is the result I am going for:
.. but the height of the picture pushes all the other elements 'down' so I get this:
How do I align these vertically - is there a way to do it without hard-coding px margins/padding for each element?
661
Wrrite vertical-align:middle; or vertical-align:top;. Write like this :
img, span , a{
vertical-align:middle
}
Check this http://jsfiddle.net/bB9vV/
62
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img, .divider{float:left;}
.up{margin-bottom:15px; float:left;}
</style>
</head>
<body>
<span class='up'>Hello [username]</span>
<span class="divider"></span>
<img src="/photo.jpg" />
<span class="divider"></span>
<a class='up' href="/logout">Logout</a>
</body>
</html>
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
