html - What CSS can display right, center and left aligned images like a table can? -
i want use css reproduce behaviour of simple html table below.
the html table has width of 100% 1 row , 3 columns. each column contains image image1 left-aligned; image2 centered; , image3 right-aligned.
importantly, when browser window resized small, images should not overlap or wrap onto next line. should stay next each other in same line (this table solution does).
this sounds such simple requirement, i've been struggling many hours , appreciated.
<html> <head> <title>test</title> </head> <body> <table width="100%"> <tr> <td align="left"> <img width="150" height="129" src="image1.gif"> </td> <td align="center"> <img width="400" height="120" border="0" src="image2.jpg"> <!-- main logo --> </td> <td align="right"> <img width="141" height="80" src="image3.png"> </td> </tr> </table> </body> </html>
you can use display: table
, display: table-cell
similar properties of table.
html
<div class="table"> <div class="table-cell center"> <p>center</p> </div> <div class="table-cell left"> <p>left</p> </div> <div class="table-cell right"> <p>right</p> </div> </div>
css
.table{ display: table; } .table-cell{ height: 100px; width: 100px; display: table-cell; vertical-align: middle; } .center{text-align: center;} .left{text-align: left;} .right{text-align: right;}
check out pen: http://codepen.io/codefancy/pen/pqqjyb/
Comments
Post a Comment