0

I have an HTML table where one of the columns have thumbnail images.

table {
    border-collapse:collapse;
}
td,th {
    border:1px solid;
    padding:0;
}
td:nth-child(2) {
    /*display:flex;
    justify-content:center;*/
    text-align:center;
}
img {
  max-height:2em;
  /*display:block;*/
}
<table>
  <tr><th>col1</th><th>col2</th><th>col3</th></tr>
  <tr><td>a</td><td><img src='https://upload.wikimedia.org/wikipedia/commons/3/30/Dolphintursiops.jpg' /></td><td>c</td>
  <tr><td>d</td><td><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Dolphind.jpg/320px-Dolphind.jpg' /></td><td>f</td>
  <tr><td>g</td><td><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Killerwhales_jumping.jpg/320px-Killerwhales_jumping.jpg' /></td><td>i</td>
</table>

If I add display:block to the images, the space below each image disappears, but I can't center them anymore.

I tried centering with display:flex;justify-content:center, but strangely this creates a thicker border on each cell.

How can I center the images without creating additional space or a thicker border?

Rodrigo
  • 4,706
  • 6
  • 51
  • 94
  • 1
    vertilca-align:top to the image – Temani Afif Jul 24 '21 at 20:56
  • @TemaniAfif Sure, another one of those counter-intuitive CSS solutions... thank you! – Rodrigo Jul 24 '21 at 20:58
  • The reason when you add flex is you have multiple elements aside each other that have borders and those borders are ***stacking***, making it appear the borders are ***growing***. Using CSS you could explicitly target each side border that ***borders*** another element and add `border: none`. Then `border-bottom: 1px solid black`, though as Temani pointed out `vertical-align` mush easier and with less css code does the trick. – dale landry Jul 24 '21 at 21:09
  • @dalelandry Well, I thought that `display:flex` changed the behavior of the child elements, not of the siblings. And since the only child is an image on each `td`, I don't see any reason for this "border stacking". Anyway, problem solved now. – Rodrigo Jul 24 '21 at 21:13

0 Answers0