html - 将 href 对齐到 div 文本到 div 的顶部

Question

我试图在 bootstrap 中将 a 标签与我的 div 顶部对齐。这是我当前的代码:

<div class="authorAvatar">
    <img src="<?php echo $author->avatar;?>" style="width:auto;height:50px;">
    <a href="profile.php?id=<?php echo $author->user_id;?>">
        <?php echo $author->username;?>
        <?php echo $author->points;?>
    </a>
</div>

我想要实现的是显示用户的头像，然后在它旁边，用户名和用户的积分就在它的正下方。我尝试使用以下 CSS 代码:

.authorAvatar {
    display:inline-block;
    float:right;
    height:50px;
}

.authorAvatar a {
    display:inline;
    vertical-align: text-top;
}

但是 a href 位于 div 的中心。我还尝试将 position:relative 添加到 authorAvatar 和 position:absolute; 和 top:0px; 到 a 标签，但图像位于 a href 标签下方。

这里是一个plunkr:

http://plnkr.co/edit/9HVQ4U3UjjqaiHzlxqkO

我怎样才能达到这种效果:

image     username
image     points
image

Answer 1

如果您使用的是 bootstrap，请尝试使用 boostrap 的 css 类而不是您自己的 css。

<img class="img-responsive pull-left"src="http://worldofdtcmarketing.com/wp-content/uploads/2014/05/Apple-logo.jpg" style="height:50px">
<a class="pull-right"href="#">blabla</a>