Tips for Aligning Several Images Horizontally in an Article

Question

Tips for Aligning Several Images Horizontally in an Article

Does anyone know how to center pictures in an article horizontally? I've tried various techniques without success.

If it would be helpful, I can share the CSS I currently have. However, I am open to starting from scratch with the CSS as well since I am working from a Dreamweaver template.

https://i.stack.imgur.com/ZcSsm.png

<article class="fluid gallery">
<h2 class="fluid showAreaH2 headingStyle">Edutech Personal del Portador</h2>
<figure class="fluid tiles zeroMargin_desktop zeroMargin_tablet"> <img src="images/mauricio.jpg" alt="Maricio"/>
  <figcaption class="textStyle">Mauricio y Rosalía Sánchez</figcaption>
</figure>
<figure class="fluid tiles"> <img src="images/guillermo.jpg" alt="Guillermo y Sarit"/>
  <figcaption class="textStyle">Guillermo y Sarit Llanos</figcaption>
</figure>

css html

Answer 1

Answer №1

section.media-responsive.gallery {
  align-content: center;
}

Answer 2

section.media-responsive.gallery {
  align-content: center;
}

Answer 3

Answer №2

Flexbox is a great solution when you need to center content horizontally. Just set the display property to flex, and use justify-content:center. Keep in mind that older browsers may require vendor prefixes.

section {
  width:100%;
  display:flex;
  justify-content:center;
}
img {
  padding:1em;
}

<section>
  <img src="http://placehold.it/50x50">
  <img src="http://placehold.it/50x50">
</section>

Answer 4

Flexbox is a great solution when you need to center content horizontally. Just set the display property to flex, and use justify-content:center. Keep in mind that older browsers may require vendor prefixes.

section {
  width:100%;
  display:flex;
  justify-content:center;
}
img {
  padding:1em;
}

<section>
  <img src="http://placehold.it/50x50">
  <img src="http://placehold.it/50x50">
</section>

Answer 5

Answer №3

To ensure that your pictures are centered within a document, you can enclose them in a specific div like this:

<div class="image-container">
   <img src="..." alt="...">
   ...
</div>

Don't forget to apply the following CSS to style the image container:

.image-container { text-align: center; }

This way, you can easily align your images with the rest of the content on your page.

Answer 6

To ensure that your pictures are centered within a document, you can enclose them in a specific div like this:

<div class="image-container">
   <img src="..." alt="...">
   ...
</div>

Don't forget to apply the following CSS to style the image container:

.image-container { text-align: center; }

This way, you can easily align your images with the rest of the content on your page.

Answer 7

Answer №4

If you're looking to horizontally center images on your website, here's a suggestion that might help. It shouldn't be too difficult to implement.

My advice would be to create a container element for the images you want to center horizontally. Then, set those images or their container elements to have a display: inline-block; style.

.gallery {
  text-align: center;
}
.img-container {
  display: inline-block;
}

<div class="gallery">
  <div class="img-container">
    <img src="http://placehold.it/100x50">
    <p>
      Caption
    </p>
  </div>
  <div class="img-container">
    <img src="http://placehold.it/100x50">
    <p>
      Caption
    </p>
  </div>
  <div class="img-container">
    <img src="http://placehold.it/100x50">
    <p>
      Caption
    </p>
  </div>
</div>

Check out the demo on JSFiddle.

Answer 8

If you're looking to horizontally center images on your website, here's a suggestion that might help. It shouldn't be too difficult to implement.

My advice would be to create a container element for the images you want to center horizontally. Then, set those images or their container elements to have a display: inline-block; style.

.gallery {
  text-align: center;
}
.img-container {
  display: inline-block;
}

<div class="gallery">
  <div class="img-container">
    <img src="http://placehold.it/100x50">
    <p>
      Caption
    </p>
  </div>
  <div class="img-container">
    <img src="http://placehold.it/100x50">
    <p>
      Caption
    </p>
  </div>
  <div class="img-container">
    <img src="http://placehold.it/100x50">
    <p>
      Caption
    </p>
  </div>
</div>

Check out the demo on JSFiddle.

Answer 9

Answer №5

(Revised response)

Enclose both pictures in a container and align the content within it:

<article class="fluid gallery">
    <h2 class="fluid showAreaH2 headingStyle">Edutech Personal del Portador</h2>
    <div class="wrapper1">
      <figure class="fluid tiles zeroMargin_desktop zeroMargin_tablet"> <img src="images/mauricio.jpg" alt="Maricio"/>
        <figcaption class="textStyle">Mauricio y Rosalía Sánchez</figcaption>
      </figure>
      <figure class="fluid tiles"> <img src="images/guillermo.jpg" alt="Guillermo y Sarit"/>
        <figcaption class="textStyle">Guillermo y Sarit Llanos</figcaption>
      </figure>
    </div>
    <!-- additional text? -->
</article>

CSS:

.wrapper1 {
  width: 100%;
  text-align: center;
}

Answer 10

(Revised response)

Enclose both pictures in a container and align the content within it:

<article class="fluid gallery">
    <h2 class="fluid showAreaH2 headingStyle">Edutech Personal del Portador</h2>
    <div class="wrapper1">
      <figure class="fluid tiles zeroMargin_desktop zeroMargin_tablet"> <img src="images/mauricio.jpg" alt="Maricio"/>
        <figcaption class="textStyle">Mauricio y Rosalía Sánchez</figcaption>
      </figure>
      <figure class="fluid tiles"> <img src="images/guillermo.jpg" alt="Guillermo y Sarit"/>
        <figcaption class="textStyle">Guillermo y Sarit Llanos</figcaption>
      </figure>
    </div>
    <!-- additional text? -->
</article>

CSS:

.wrapper1 {
  width: 100%;
  text-align: center;
}

Answer 11

Answer №6

I concur with Arathi Sreekumar's suggestion. In addition, it is important to include the following CSS code:

.figure-wrapper figure { display: inline-block; }

You may also consider including padding for the .figure-wrapper figure element.

Answer 12

I concur with Arathi Sreekumar's suggestion. In addition, it is important to include the following CSS code:

.figure-wrapper figure { display: inline-block; }

You may also consider including padding for the .figure-wrapper figure element.

Tips for Aligning Several Images Horizontally in an Article

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

How can I retrieve the HTML content of a ReactJS rectangle element saved in an array?

What steps can I take to stop my browser from displaying the "waiting for MyHostName" message while performing an ajax Post/Get operation?

Creating consistently sized rows of Bootstrap columns - with either equal heights or equal spacing between each row

Exploring scraping capabilities in Node.js

Arranging arrows strategically along a line and ensuring they are positioned correctly above all div elements

What is the best way to arrange these badges in a row?

Is it possible that the Divi blurb module fails to extend to the full height of the row?

Challenge in creating a responsive layout using Bootstrap framework

When the click event occurs, add a class. After a delay using a timeout function, remove the added

Achieve the effect of "background-attachment: fixed" using a div element

Convert HTML content to a PDF file with Java

Adding a div beside an input element - step by step guide

Tips for retrieving user input and displaying it on an HTML page

Is your Z-Index failing to make an impact?

Convert text to bold when checkbox is selected and alter color upon selecting a radio button

(Original) redirect from specific url / url detection New text: "Redirection

Progressive computation depending on the size of the window in Cascading Style Sheets

Customizing Semantic UI Navigation Menu Styles

Cursor hovers over button, positioned perfectly in the center

Generate Material UI sidebar components that are positioned above all other components