CODEWITHSUNDEEP
htmlcssvertical-alignment
Harper
Harper

Reputation: 1305

HTML CSS: aligning elements Vertically on one line

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:

Desired result

.. but the height of the picture pushes all the other elements 'down' so I get this:

Actual result

How do I align these vertically - is there a way to do it without hard-coding px margins/padding for each element?

Upvotes: 3

Views: 1105

Answers (3)

TryHarder
TryHarder

Reputation: 2777

If I understand you correctly, I think you will want to change the line-height of the divider using CSS. Give the line-height a value equal to the height of your image. Then you will need to center the text.

.divider{
line-height:30px;
}

EDIT You may also need to align your image. EXAMPLE use {vertical-align:middle;} for your image

More info here align image vertically

Upvotes: 1

sandeep
sandeep

Reputation: 92863

Wrrite vertical-align:middle; or vertical-align:top;. Write like this :

img, span , a{
  vertical-align:middle
}

Check this http://jsfiddle.net/bB9vV/

Upvotes: 5

s_p
s_p

Reputation: 4693

<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>

Upvotes: 1

Related Questions