css - how to display image and left side and text right side in html -
hi in below code want display images left side , text should right side.but it's displaying down of image .and 3 images in single line same image text.
.specilites{ width: 1050px; margin: 0 auto 0 auto; padding-top:7px; color:#008080; font-size:30px; } .specilites img{ background-repeat: no-repeat; background-size: cover; overflow:hidden; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; width:90px; height:90px; display:inline-block; border: 1px solid #008080; } .specilites h1{ width: 1050px; margin: 0 auto 0 auto; padding-top:7px; color:#008080; font-size:30px; } .specilites td{ font-size:15px; display:block; }
<div class="specilites"> <table> <tr> <td> <img src="http://lorempixel.com/400/200"/> accident & emergency care</td> <td><img src="http://lorempixel.com/400/200"/></td> <td> <img src="http://lorempixel.com/400/200"/><td> </tr> <img src="http://lorempixel.com/400/200"/> <img src="http://lorempixel.com/400/200"/> <img src="http://lorempixel.com/400/200"/> <img src="http://lorempixel.com/400/200"/> <img src="http://lorempixel.com/400/200"/> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> <img src="http://lorempixel.com/400/200" /> </table> </div>
assuming want 3 images in single line , image left text right that. demo here
.specilites{ width: 1050px; margin: 0 auto 0 auto; padding-top:7px; color:#008080; font-size:30px; } .specilites img{ background-repeat: no-repeat; background-size: cover; overflow:hidden; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; width:90px; height:90px; display:inline-block; border: 1px solid #008080; } .specilites h1{ width: 1050px; margin: 0 auto 0 auto; padding-top:7px; color:#008080; font-size:30px; } .specilites td{ font-size:15px; /* display:block;*/ } <div class="specilites"> <table> <tr> <td><img src="http://lorempixel.com/400/200"/></td> <td>accident & emergency care</td> <td><img src="http://lorempixel.com/400/200"/></td> <td><img src="http://lorempixel.com/400/200"/></td> </tr> <tr> <td><img src="http://lorempixel.com/400/200"/></td> <td><img src="http://lorempixel.com/400/200"/></td> <td><img src="http://lorempixel.com/400/200"/></td> </tr> <tr> <td><img src="http://lorempixel.com/400/200"/></td> <td><img src="http://lorempixel.com/400/200"/></td> <td><img src="http://lorempixel.com/400/200"/></td> </tr> <tr> <td><img src="http://lorempixel.com/400/200"/></td> <td><img src="http://lorempixel.com/400/200"/></td> <td><img src="http://lorempixel.com/400/200"/></td> </tr> <tr> <td><img src="http://lorempixel.com/400/200"/></td> <td><img src="http://lorempixel.com/400/200"/></td> <td><img src="http://lorempixel.com/400/200"/></td> </tr> </table> </div>
Comments
Post a Comment