How to position images in the center horizontally using CSS without using percentage (%) measurements

Question

How to position images in the center horizontally using CSS without using percentage (%) measurements

There seems to be some excess space on the right side of my gallery...

The container for my images:

.my-gallery figure {
  display: block;
  float: left;
  width: 150px;
}

Is it possible to always horizontally center images on different screen sizes without using a percentage value? Any brilliant ideas to make the excess space less noticeable?

Or is using a percentage value the only solution?

In screen A:

https://i.sstatic.net/L4hiZ.jpg

In screen B:

https://i.sstatic.net/1XoCi.png

.my-gallery {
  width: 100%;
  float: left;
}
.my-gallery img {
  width: 100%;
  height: 112px;
}
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  width: 150px;
}
.my-gallery figcaption {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 26px;
}
.my-gallery img {
  max-width: 100%;
}

<div class="my-gallery">
  <figure>
    <a href="big1.jpg">
      <img src="http://placehold.it/112x150" alt="1" />
    </a>
    <figcaption>111111111111111111111111</figcaption>
  </figure>
  <figure>
    <a href="big2.jpg">
      <img src="http://placehold.it/112x150" alt="2" />
    </a>
    <figcaption>222222222222222222222222</figcaption>
  </figure>
  <figure>
    <a href="big3.jpg">
      <img src="http://placehold.it/112x150" alt="3" />
    </a>
    <figcaption>3333333333333333333333333333333</figcaption>
  </figure>
  <figure>
    <a href="big4.jpg">
      <img src="http://placehold.it/112x150" alt="4" />
    </a>
    <figcaption>444444444444444444444444</figcaption>
  </figure>
  ...
</div>

html css

Answer 1

Answer №1

If you're having trouble with using the % symbol, one alternative solution is to utilize CSS flexbox.

Check out this JSFiddle example for reference

To achieve the desired layout, adjust the CSS properties of .my-gallery and eliminate the float property in figure:

.my-gallery {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.my-gallery figure {
  display: block;
  margin: 0 5px 5px 0;
  width: 150px;
}

Answer 2

If you're having trouble with using the % symbol, one alternative solution is to utilize CSS flexbox.

Check out this JSFiddle example for reference

To achieve the desired layout, adjust the CSS properties of .my-gallery and eliminate the float property in figure:

.my-gallery {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.my-gallery figure {
  display: block;
  margin: 0 5px 5px 0;
  width: 150px;
}

Answer 3

Answer №2

The best solution is to utilize @media queries

I have also updated the .my-gallery rule to

.my-gallery {
  margin: 0 auto
}

Example code snippet

.my-gallery {
  margin: 0 auto
}
.my-gallery img {
  width: 100%;
  height: 112px;
}
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  width: 150px;
}
.my-gallery figcaption {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 26px;
}
.my-gallery img {
  max-width: 100%;
}
@media screen and (min-width: 310px) {
  .my-gallery {
    width: 310px;
  }
}
@media screen and (min-width: 465px) {
  .my-gallery {
    width: 465px;
  }
}
@media screen and (min-width: 620px) {
  .my-gallery {
    width: 620px;
  }
}

<div class="my-gallery">
  <figure>
    <a href="big1.jpg">
      <img src="http://placehold.it/112x150" alt="1" />
    </a>
    <figcaption>111111111111111111111111</figcaption>
  </figure>
  <figure>
    <a href="big2.jpg">
      <img src="http://placehold.it/112x150" alt="2" />
    </a>
    <figcaption>222222222222222222222222</figcaption>
  </figure>
  <figure>
    <a href="big3.jpg">
      <img src="http://placehold.it/112x150" alt="3" />
    </a>
    <figcaption>3333333333333333333333333333333</figcaption>
  </figure>
  <figure>
    <a href="big4.jpg">
      <img src="http://placehold.it/112x150" alt="4" />
    </a>
    <figcaption>444444444444444444444444</figcaption>
  </figure>
</div>

Answer 4

The best solution is to utilize @media queries

I have also updated the .my-gallery rule to

.my-gallery {
  margin: 0 auto
}

Example code snippet

.my-gallery {
  margin: 0 auto
}
.my-gallery img {
  width: 100%;
  height: 112px;
}
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  width: 150px;
}
.my-gallery figcaption {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 26px;
}
.my-gallery img {
  max-width: 100%;
}
@media screen and (min-width: 310px) {
  .my-gallery {
    width: 310px;
  }
}
@media screen and (min-width: 465px) {
  .my-gallery {
    width: 465px;
  }
}
@media screen and (min-width: 620px) {
  .my-gallery {
    width: 620px;
  }
}

<div class="my-gallery">
  <figure>
    <a href="big1.jpg">
      <img src="http://placehold.it/112x150" alt="1" />
    </a>
    <figcaption>111111111111111111111111</figcaption>
  </figure>
  <figure>
    <a href="big2.jpg">
      <img src="http://placehold.it/112x150" alt="2" />
    </a>
    <figcaption>222222222222222222222222</figcaption>
  </figure>
  <figure>
    <a href="big3.jpg">
      <img src="http://placehold.it/112x150" alt="3" />
    </a>
    <figcaption>3333333333333333333333333333333</figcaption>
  </figure>
  <figure>
    <a href="big4.jpg">
      <img src="http://placehold.it/112x150" alt="4" />
    </a>
    <figcaption>444444444444444444444444</figcaption>
  </figure>
</div>

Answer 5

Answer №3

Instead of using %, another option is to utilize a table structure with the property table-layout: fixed; to organize your items.

HTML

<table>
    <tr>
        <td>
            1
        </td>
        <td>
            2
        </td>
        <td>
            3
        </td>
    </tr>
</table>

CSS

table{
  table-layout: fixed;
}

Answer 6

Instead of using %, another option is to utilize a table structure with the property table-layout: fixed; to organize your items.

HTML

<table>
    <tr>
        <td>
            1
        </td>
        <td>
            2
        </td>
        <td>
            3
        </td>
    </tr>
</table>

CSS

table{
  table-layout: fixed;
}

How to position images in the center horizontally using CSS without using percentage (%) measurements

Answer №1

Answer №2

Answer №3

Similar questions

Expand the HTML Template and Resize Children to Fit the Window

Can heuristic methods be utilized to identify encoding in XML/HTML documents?

Tips for eliminating the margin in a bootstrap navigation bar when hovering?

The offspring surpasses the parent's limits and extends beyond its

The alignment of a background image in CSS is different from using margin:0 auto, especially when dealing with scrollbars

Verify if the entire block contains any children with text inside

Responsive navigation menu featuring dynamic dropdown menus using HTML and CSS

Using jQuery to Retrieve Check Box Labels and Populate Them into Textboxes

Tips for enhancing the clarity of an `html2canvas` screenshot

Gather numerical values and transform them into dates using AngularJS

Ways to determine if a date matches today's date within a component template

Using the linear-gradient method in CSS for border images

Implementing checkboxes for each API data in JavaScript

How to extract selected value from a dropdown menu in a React component

Using Vue to alter data through mutations

What is the proper functionality of the data-bs-toggle attribute in Bootstrap 5?

Slideshow development with code

Change CSS style sheets depending on the size of the viewport

Obtain a Compilation of Video Sources in an HTML5 Format

Footer positioned correctly with relative DIV