Align image using div?

Question

So, I'm trying to center my text vertically in a div, and then shift the div in the center on the right side of the image, as shown in the example:

I still:

HTML

<div class="header"> <div class="logo"> <img src="/images/logo.png" alt="logo"/> </div> <ul id="nav"> <li><a href="$HOME_PAGE_LINK$">Portfolio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <div id="headerPro"> <div class="headerAvatar"> <img src="http://i.imgur.com/DQBOgkw.png" alt="avatar" /> </div> <div class="headerText"> This is some text. </div> </div> </div> 

CSS

 #headerPro { position:absolute; top: 35px; right: 50px; width:450px; height:100px; } .headerAvatar { margin-top:10px; margin-left:150px; background: #242426; width: 70px; height: 70px; padding: 5px; border-radius: 50%; } .headerAvatar img{ display: block; width: 100%; border: 0; margin: 0; border-radius: 50%; } .headerText { height:50px; width:200px; text-align:center; background-color:red; } 

Answer 1

You can use the float property:

Set the image to inline:

 .headerAvatar { display: inline-block; } 

and then float the text:

 .headerText { float: right } 

Spell here: http://jsfiddle.net/nDXMr/

Note. I placed some extreme edge to vertically align 2 divs.

Answer 2

I edited jsfiddle from RoyalLys and added:

  .headerText{ line-height:50px; } 

This vertically centers the text in the div

http://jsfiddle.net/nDXMr/1/

Also, take a look at one of my old questions. This is not 100% the same, but may give you the answer:

HTML and CSS3 Menu Tasks

EDIT: I did jsfiddle of your code and added some things:

 float:left; 

at # nav, .headerAvatar, .headerText

  margin-top:20px; line-height:50px; 

on .headerText

You can add some other fields to add space between different elements.

jsFiddle: http://jsfiddle.net/fL4JA/

Answer 3

You can also add something like this to the headerText class:

  top: 10px; position: absolute; right: 0;