将href对准div文本顶部的div

Question

我正在尝试在Bootstrap中将标签对准我的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标签，但是图像在href标签下面。

这是一个笨拙的人：

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

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

image     username
image     points
image

Answer 1

 .authorAvatar { display:inline-block; float:right; height:50px; } .authorAvatar img{ display: inline-block; } .authorAvatar a { display: inline-block; vertical-align: top; } 

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

Answer 2

如果您正在使用引导程序，请尝试使用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>

Answer 3

检查此效果是否符合您的需求。

http://plnkr.co/edit/bdzuVhgAqaP6Bi6pLqOW?p=preview

的HTML：

<link rel="stylesheet" href="style.css">
<div class="authorAvatar">
    <img src="http://worldofdtcmarketing.com/wp-content/uploads/2014/05/Apple-logo.jpg" style="width:auto;height:50px;">
    <a href="profile.php?id=1>">
      <div>blahblahblah</div>
      <div>blahblahblah</div>
    </a>
</div>

CSS：

.authorAvatar {
    height:50px;
}

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