CSS Tables: Fixing the column-width - css

Question

Note: I would be displaying this page on my SharePoint 2010 site.
I am trying to use CSS table to display and following is my HTML code for 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 is my CSS for the 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 was trying to display these images and its corresponding name in tabular format. The problem with this table is that width of the cell is getting resized as per the content of the cell. However, i want to fix the table cell width (no restrictions on height). Also I want to restrict the number of columns to 4. Any more entries should go to next row.
Any help on how to achieve would be highly appreciated. Thanks in advance.

Answer 1

My solution uses flexbox CSS3 properties to allow the boxes to be aligned and to wrap if the window gets to small. If you don't want this additional responsive behavior, you can change the max-width for width which in any case limits the number element to 4 per line.
I had to add boxing (div) inside to fix the 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 */
}
/* the content as a bloc */
.inside-container {
width: 200px;
height: 100px;
display: flex; /* makes the description to stay next to the 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 it helps!
edit:
To center your text horizontally you need the container to have text-align: center;.
To center horizontally, you need to put your text in a <div> and add these properties display: table-cell; vertical-align: middle;. It's not as beautiful as I would like, but it works well!