css - 在同一行中显示图像和文本

我想在一行中显示图像和文本，如tripadvisor.in/

<div style="display:inline-block">
<div style="display:inline;float:left">
<a href="CollegeProfile.php" class="white">
<h4 style="margin-bottom:10px;display:inline">Nice college to study</h4></a>
<br /><a href="CollegeProfile.php" class="white">Read reviews of Indian institute of management,Ahmedabad</a>
</div>
</div>


<div style="display:inline-block">
&nbsp;<img class="shakeImage" src="assets/img/author.jpg" style="border: 1px solid white;height:60px;display:inline" />
</div>

它以单独的行显示图像和文本，例如：

最佳答案

如果您需要坚持使用div元素，则可以使用以下方法进行操作：

Demo Fiddle

的HTML

<div class='table'>
    <div class='cell'>
       <a href="CollegeProfile.php"><h4 >Nice college to study</h4></a>
       <a href="CollegeProfile.php">Read reviews of Indian institute of management,Ahmedabad</a>
    </div>
    <div class='cell'>
        <img class="shakeImage" src="assets/img/author.jpg" style="border: 1px solid white;height:60px;display:inline" />
    </div>
</div>

的CSS

.table {
    display:table;
}
.cell {
    display:table-cell;
    vertical-align:middle;
}
h4 {
    margin:0;
}