2 rows of images (odd numbers of images)

Question

I want to make 2 rows of images like this (from 5 images):

Image Image
Image Image Image

But how can I center the first row?
My result looks like this:

Image Image
Image Image Image

figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

figure:hover img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  position: relative;
  height: auto;
  display: block;
  z-index: 999;
  border: 1px solid #ffffff;
  background-color: #ffffff;
}

<table border="0">

  <tr>
  
    <td>
      <figure style="margin: 0;">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>

    <td>
      <figure style="margin:0">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>

  </tr>

  <tr>

    <td>
      <figure style="margin: 0;">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>
    
    <td>
      <figure style="margin:0">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>
    
    <td>
      <figure style="margin: 0">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>
    
  </tr>
  
</table>

View on JSFiddle

Try using divs instead of a table. They're much more flexible. — Difster, Jul 07 '17 at 18:26
Just a general note, html table tags should be used for tabular data (like spread sheets), where the css display type table should be used when wanting to display contents in a tabular manner (like in your instance) — yanman1234, Jul 07 '17 at 18:33
I recommend you to check `Bootstrap Framework` `Grid System`, You can download the `Grid System` individually, It would make things a lot easier for you. But as an acceptable answer here, I suggest Rafael or Michael answers. — Calibur Victorious, Jul 07 '17 at 18:44
Thank you guys for your knowledge and time, ii'll check those solutions! — Tehn, Jul 07 '17 at 20:02

score 3 · Answer 1 · answered Jul 07 '17 at 18:32

With your existing markup, you can change the display of your tr's to flex and use justify-content: center;

figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

figure:hover img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  position: relative;
  height: auto;
  display: block;
  z-index: 999;
  border: 1px solid #ffffff;
  background-color: #ffffff;
}

tr {
  display: flex;
  justify-content: center;
}

<center>

  <table border="0">

    <tr>

      <td>
        <figure style="margin: 0;">
          <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
        </figure>
      </td>


      <td>
        <figure style="margin:0">
          <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
        </figure>
      </td>

    </tr>


    <tr>

      <td>
        <figure style="margin: 0;">
          <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
        </figure>
      </td>
      <td>
        <figure style="margin:0">
          <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
        </figure>
      </td>
      <td>
        <figure style="margin: 0">
          <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
        </figure>
      </td>
    </tr>
  </table>
</center>

brilliant! tthat's what i'm looking for! Thank you! – Tehn Jul 07 '17 at 20:01 — Tehn, Jul 07 '17 at 20:01

Rafael Gadotti Bachovas · Answer 2 · 2017-07-07T18:35:19.510

.row {
  display: table;
  margin: 10px auto;
}

.row img {
  display:inline-block;
}

<div class="row">
  <img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100">
  <img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100">
</div>

<div class="row">
  <img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100">
  <img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100">
  <img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100">
</div>

G-Cyrillus · Answer 3 · 2017-07-07T18:47:11.347

You can drop the table and center tags and use a single div.

Then the flex-layout makes it much easier : see https://css-tricks.com/snippets/css/a-guide-to-flexbox/

/* use the flex model */
div {
  display:flex;
  flex-wrap:wrap;/* allow wrapping on multiple rows*/
  justify-content:center;/* horizontal centering */
}

figure:nth-child(1),
figure:nth-child(2)
{
  order:-1;/* reorder the first 2 image ahead anything else */
}
/* add an element to push to next line the last elements */
div:before {
  content:'';
  width:100%;/* use a full row */
}

<div>
  <figure>
  <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
</figure>
<figure>
  <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
</figure>
<figure>
  <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
</figure>
<figure>
  <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
</figure>
<figure>
  <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
</figure>
</div>

demo to play with

Thanks for the answer, definitely
is more flexible solution than table. — Tehn, Jul 07 '17 at 20:05

score 1 · Answer 4 · answered Jul 07 '17 at 18:39

Michael Coker has a correct answer, especially if it's appropriate to use tables for your problem. But if you're just using tables for layout/alignment, that's typically thought of as bad practice (see this SO post Why not use tables for layout in HTML?)

I thought I would offer an alternative solution that does not involve tables.

figure {
  display: inline-block;
  border: 1px solid cadetblue;
}

.wrapper {
  text-align:center;
}

<div class="wrapper">
  <div class="top-row">
    <figure style="margin: 0;"><a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a></figure>

    <figure style="margin:0"><a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a></figure>
    </div>

  <div class="second-row">
    <figure style="margin: 0;"><a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a></figure>
    <figure style="margin:0"><a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a></figure>
    <figure style="margin: 0"> <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a></figure>
  </div>
</div>

2 rows of images (odd numbers of images)

4 Answers4