Two lines of pictures (an odd amount of images)

I need help creating 2 rows of images with 5 images in total:

     Image Image
Image Image Image

How can I center the first row properly?
Currently, my layout 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

htmlcsshtml-table

Answer №1

To enhance your current code, consider adjusting the display property of the tr elements to flex and applying 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>

Answer №2

.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>

Answer №3

Eliminate the table and center tags and utilize a single div.

The flex-layout feature simplifies the process: check out https://css-tricks.com/snippets/css/a-guide-to-flexbox/

/* utilizing the flex model */
div {
  display:flex;
  flex-wrap:wrap;/* enables wrapping on multiple rows*/
  justify-content:center;/* aligning content horizontally */
}

figure:nth-child(1),
figure:nth-child(2)
{
  order:-1;/* reordering the first 2 images ahead of others */
}
/* adding an element to move the remaining elements to the next line */
div:before {
  content:'';
  width:100%;/* utilizes 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>

try out the demo here

Answer №4

Michael Coker gave a valid answer regarding the use of tables, especially if it fits your specific problem. However, relying on tables purely for layout purposes is generally discouraged (refer to this Stack Overflow post Why not use tables for layout in HTML?)

Here's an alternative approach that eliminates the need for 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate a Bootstrap panel featuring a stylish border design and perfectly centered text

I am attempting to design two panels in Bootstrap with centered text and different fonts. Similar to the layout shown in the image below https://i.sstatic.net/aVGwV.png Here is my code: <div class="row"> <div class="col-lg-6&q ...

cssbootstrap-4

Is there a way to create a navigation menu that highlights as we scroll down the page?

Check out this example of what I am looking for. https://i.stack.imgur.com/fdzvZ.png If you scroll, you will notice that the left menu highlights. Sub-menus will extend when the corresponding menu is highlighted and collapse when other menus are highlig ...

javascripthtmlnavscrollspy

Embed a photo into a pop-up window

Is there a way to dynamically insert an image into a Modal by utilizing the value of the variable data-image? This variable will change based on the selected image. <script type="text/javascript"> $('#myModal').on('show.bs.m ...

javascripthtmlbootstrap-4

What is the best way to develop an expanding line animation from this starting point?

I have a vision for an animation where, upon hovering over an icon, it enlarges, increases in opacity, and reveals some accompanying text. The visual effect I am aiming for involves two lines of color expanding horizontally from the center outwards before ...

htmlcssanimationcss-animations

What is the correct way to utilize jquery's getJSON function?

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#hidebtn").click(function() { ...

phpjqueryhtmlajax

Creating a dynamic PHP calculator that provides instant results by taking input from an HTML form

For the sheer joy of coding in PHP, I decided to create a calculator. Take a look at the result: PHPTest Apologies for some German text within. Here's the Code: <?php $umsatz = $_POST['umsatz']; $varkost = $_POST['varkost& ...

phpjavascripthtmlajaxjquery

I'm looking for a method to trigger onChange() specifically on Internet Explorer using only JavaScript, HTML, and CSS without relying on jQuery

Looking for a way to utilize onChange() only on Internet Explorer using Javascript, HTML, CSS (No Jquery). My current code successfully sends the input to my function upon onChange(), but it seems to work smoothly on Chrome and not on IE. Is there a meth ...

javascripthtmlcss

How to display only the thumbnail on WordPress archive page and remove the post excerpt

I am currently in the process of revamping my category archive to resemble a grid layout by utilizing custom CSS. I have successfully eliminated the elements I desired using code like this: .archive .entry-footer { display: none; } Now, I only have t ...

csswordpress

Using JavaScript to place image data on the canvas in an overlay fashion

I recently wrote the code below to generate a rectangle on a canvas: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canv ...

javascripthtmlcsshtml5-canvas

Encountering unexpected behavior with the .data() method

I'm encountering an issue with my code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv= ...

javascriptjqueryhtmlcssattr

How can HTML text be highlighted even when it's behind a transparent div?

In my React application, I am facing an issue with a transparent div that serves as a dropzone for draggable elements. This div covers text and also contains children elements that may have their own text content. <Dropzone> <SomeChild> . ...

javascripthtmlcssreactjspointer-events

Leverage the power of HTML5 localstorage in order to maintain the toggle state of jQuery even

After discovering the HTML5 "localstorage" function, I decided to try implementing it in combination with jQuery toggle to keep a div in its most recent state even when the page is refreshed. It seems like a more modern alternative to using cookies. Howeve ...

jqueryhtmllocal-storage

Mastering the correct application of template language in CSS files

I am trying to serve a CSS file through my url.py file in order to utilize template tags in my CSS. Below is the code I am using: Base.html: <head> ... <link rel="stylesheet" type="text/css" href="/site_media/css/wideTitle.css" /> urls.py: ...

cssdjangodjango-templates

Protecting client-side game logic operations with web application security

I've been developing a web-based game that utilizes the Canvas feature of HTML5. However, I've come to realize that there is a significant vulnerability in my system. The scoring and gameplay statistics are currently being calculated on the clien ...

javascriptajaxhtmlsecurity

To create a distinctive design, the HTML5 wrapper will specifically enclose the Header element

After using a border, I discovered that my wrapper is only wrapping the header and not extending down to the footer. Can anyone offer some guidance on how to wrap the entire content from the header to the footer? I've come across suggestions to speci ...

htmlcsswrapper

Why is my <div> unable to recognize my <p> as part of its content?

When I tried to display an image, h3, and p inside a div tag, only the image and h3 showed up within the div. Adding a background-color helped me realize that my p element was actually outside of the div. Below is the code in question: <div class="m ...

html

Exploring the possibilities of incorporating Bootstrap 4 or ng-bootstrap elements into Angular 4 development

We are considering the use of Bootstrap 4 within an Angular 4 application by either importing their styles and JavaScript directly, or utilizing ng-bootstrap Angular components for improved performance and compatibility with the Angular app. We would lov ...

javascriptcssangularbootstrap-4ng-bootstrap

Integrating Google RECAPTCHA 2 into a PHP form input whitelist: A step-by-step guide

After adding Google reCAPTCHA to my form for increased security, I encountered an error due to the reCAPTCHA not being whitelisted. It seems that HTML5 does not support assigning the name attribute to a div element, such as <div name="myName"></di ...

phphtmlformsrecaptcha

What is the method for locating the background color within the html code on the Reddit platform?

I've been on a mission to uncover the elusive background color that rules the Reddit website. Despite my efforts in inspecting elements and identifying potential background layers, changing them did not alter the overall background color. There must b ...

htmlcss

What is the best way to sort ng-options in an AngularJS select element?

I am encountering a situation where I have the following code snippet: <select ng-model="person" ng-options="person.name for person in mv.people"> However, within the mv.people array, there are certain members that I need to hide. For examp ...

htmlangularjsangularjs-ng-options