CODEWITHSUNDEEP
css
Hitesh Modha
Hitesh Modha

Reputation: 2790

Display image and text in same line

I want to display image and text in one line like 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>

It shows image and text in separate line like: enter image description here

Upvotes: 2

Views: 1644

Answers (1)

SW4
SW4

Reputation: 71140

If you need to stick using div elements, you can do this with the below:

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;
}

Upvotes: 1

Related Questions