Table layout by divs

Question

Suppose there is a table of this kind:

<table> <tr><td><img src=""></td><td>some text</td></tr> <tr><td><img src=""></td><td>some text</td></tr> <tr><td><img src=""></td><td>some text</td></tr> </table>

The columns of the table are 50% each; the row heights are the same. The pictures in the first column are of different sizes, but all should be aligned to the center of the first cell. The text in the right column should be aligned right and centered vertically.

How to implement it in tabular layout, - I know. But how to implement it using only div and css? (Example.)

Lucky lucky 2.275 1 golden mark 13 silver marks 21 bronze marks · Answer 1 · 2012-11-15T13:05:37

Standard html-table can be reproduced by divas with such classes:

 .table { display: table } .tr { display: table-row } .thead { display: table-header-group } .tbody { display: table-row-group } .tfoot { display: table-footer-group } .col { display: table-column } .colgroup { display: table-column-group } .td, .th { display: table-cell } .caption { display: table-caption }

Deleted 351 1 golden mark 5 silver marks 13 bronze marks · Accepted Answer · 2012-11-20T13:41:05

To solve my problem, we used the setting of the line-height for the parent container and a set of properties { display: inline-block; line-height: 1.1; vertical-align: middle; } { display: inline-block; line-height: 1.1; vertical-align: middle; } { display: inline-block; line-height: 1.1; vertical-align: middle; } for nested elements that need to be aligned vertically, the horizontal alignment is simple { text-align:center; } { text-align:center; }

This is html:

  <div class="block-core"> <div class="left-image"><img src="b1.png"></div> <div class="right-text"><p>Seat Pre-Booking App 18%</p></div> </div>

and css to him:

 .left-image { position:relative; float:left; width:200px; height:70px; line-height:70px; text-align:center; } .left-image img { display: inline-block; line-height: 1.1; vertical-align: middle; } .right-text { position:relative; float:right; width:200px; height:70px; line-height:70px; } .right-text p { font-size:11pt; display: inline-block; line-height: 1.1; vertical-align: middle; }

Answer 3 · 2012-11-15T12:23:41

Roughly speaking so:

  <style> .td { background-color: wheat; float: left; position: relative; width: 50%; } .break{ clear: both; } </style> <div id="main_container"> <div class="td">1</div><div class="td">2</div> <div class="break"></div> <div class="td">3</div><div class="td">4</div> </div>

and the pictures aligned to the center of the first “column” where? .. vertical alignment in the cells of the second column - where? ..
I quote TS> MY ADVANTAGES: quoted1>> I am not afraid of difficult tasks, they are afraid of me for myself, I treat my projects as my own children> I say what I think (although some consider this a disadvantage)>

Table layout by divs

3 answers 3

More articles: