将图像与div对齐？

Question

所以我试图将文本垂直居中在div中，然后在图片的居中右侧滑动div，如下例所示：

我到目前为止：

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

您可以使用float属性：

将图像div设置为内联：

.headerAvatar { display: inline-block; }

然后浮动文本：

.headerText { float: right }

在这里小提琴：http://jsfiddle.net/nDXMr/

注意：我放了一些margin-top来垂直对齐2 div。

Answer 2

我编辑了RoyalLys的jsfiddle，并补充道：

 .headerText{
  line-height:50px;
 }    

垂直居中 div中的文字

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

另外，看看我以前的一个问题。它不是100％相同，但可能会给你答案：

HTML and CSS3 menu questions

修改 我做了一个代码的jsfiddle并添加了一些东西：

float:left;

on #nav，.headerAvatar，.headerText

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

<。> on .headerText

您可以添加一些其他边距以在不同元素之间添加空格。

的jsfiddle： http://jsfiddle.net/fL4JA/

Answer 3

你也可以在headerText类中添加这样的东西：

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