html - 将图像与 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

您可以使用浮动属性：

将您的图像 div 设置为 inline ：

.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 和 CSS3 菜单问题

编辑： 我对你的代码做了一个 jsfiddle 并添加了一些东西：

float:left;

在#nav、.headerAvatar、.headerText

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

在 .headerText 上

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

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

Answer 3

您还可以在 headerText 类中添加类似的内容：

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