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

您可以使用 float 属性:

将图像 div 设置为内联:

.headerAvatar { display: inline-block; }

然后 float 文本:

.headerText { float: right }

在这里 fiddle :http://jsfiddle.net/nDXMr/

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