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

Occasions focused on the <input type="file"> feature

Issues with $.post function causing HTML to be displayed instead of the intended value

Modify the navbar background color in bootstrap-vuejs

The functionality of Flatbutton(Input handler) appears to be malfunctioning

How to load a URL into a div using jQuery and then update the div with new content?

Enclose each set of objects, such as text, within a separate div, except for div elements

When scrolling, use the .scrollTop() function which includes a conditional statement that

Using AJAX to update content based on selected value in a dropdown menu

Tips for adjusting the value of a textbox up and down

Adjusting the size of the post title's font

Troubleshooting CSS Issues in ASP.NET Boilerplate

The process of eliminating body padding in Nuxt.js

Unlock the Full Potential: Enabling Javascript's Superpowers through PHP Execution

PHP table not displaying data

What is the best way to showcase an image that is being retrieved from PHP using ajax?

Ways to boost CSS transform with GPU acceleration

Troubleshoot: Unable to trigger change event for input type file

Resize images in PHP and MySQL with precision without distorting the image

Issue with ellipsis not functioning correctly on dynamic placeholders when they are in focus

Challenges with form validation