在同一行显示图像和文本

Question

我想在一行中显示图像和文字，如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>

它在单独的行中显示图像和文本，如：

Answer 1

如果您需要坚持使用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;
}