css3 - CSS Tables: Fixing the column-width -

note: displaying page on sharepoint 2010 site.

i trying use css table display , following html code it:

<div id="cr">     <ul class="contact-img">         <li><img src="landing page/contacts/casswade.png"></li>         <li>cass wade<br/>project manager</li>         <li><img src="landing page/contacts/meredith.png"></li>         <li>meredith<br/>hr head</li>         <li><img src="landing page/contacts/simon.png"></li>         <li>simon<br/>ceo</li>         <li><img src="landing page/contacts/roger.png"></li>         <li>roger<br/>director</li>         <li><img src="landing page/contacts/sharyl.png"></li>         <li>sharyl<br/>employee</li>     </ul>     <hr/> </div> 

here css above page:

.contact-img{     position: relative;     list-style:none;     display:table;     border:none;     padding:none;     margin:none; }  .contact-img li {     display:table-cell;     padding:10px 10px 10px 10px;     vertical-align:middle;     margin-left: 25px; } 

i trying display these images , corresponding name in tabular format. problem table width of cell getting resized per content of cell. however, want fix table cell width (no restrictions on height). want restrict number of columns 4. more entries should go next row.

any on how achieve highly appreciated. in advance.

my solution uses flexbox css3 properties allow boxes aligned , wrap if window gets small. if don't want additional responsive behavior, can change max-width width in case limits number element 4 per line.

i had add boxing (div) inside fix cell size.

html:

<ul class="container">     <li>         <div class="inside-container">             <div><img src="http://dummyimage.com/100x100/000/fff.png&text=1"></div>             <div class="description"><div>cass wade<br/>project manager</div></div>         </div>     </li>     <li>         <div class="inside-container">             <div><img src="http://dummyimage.com/100x100/000/fff.png&text=2"></div>             <div class="description"><div>meredith<br/>hr head</div></div>         </div>     </li>     <li>         <div class="inside-container">             <div><img src="http://dummyimage.com/100x100/000/fff.png&text=3"></div>             <div class="description"><div>simon<br/>ceo</div></div>         </div>     </li>     <li>         <div class="inside-container">             <div><img src="http://dummyimage.com/100x100/000/fff.png&text=4"></div>             <div class="description"><div>roger<br/>director</div></div>         </div>     </li>     <li>         <div class="inside-container">             <div><img src="http://dummyimage.com/100x100/000/fff.png&text=5"></div>             <div class="description"><div>sharyl<br/>employee</div></div>         </div>     </li> </ul> 

css:

.container {     list-style: none;     -webkit-padding-start: 0px; /* fixing chrome auto style */      display: flex;     flex-wrap: wrap;      max-width: 800px; /* max 4 items of 200px width per line  */ }  /* content bloc */ .inside-container {     width: 200px;     height: 100px;     display: flex; /* makes description stay next image */ }  .inside-container div {     width: 100px;     height: 100px; }  .inside-container div.description {     text-align: center; }  .inside-container div.description div {     display:table-cell;     vertical-align: middle; } 

hope helps!

edit:

• to center text horizontally need container have text-align: center;.
• to center horizontally, need put text in <div> , add these properties display: table-cell; vertical-align: middle;. it's not beautiful like, works well!