Centering divs with flex-container

With HTML 4, centering the contents within a div is simple. You just use <div align="center">. E.g., if I wanted to center the image and text below on a webpage, I could use the following code:

<div align="center">
<img src="186px-Antinous_Mandragone_profil.jpg" alt="Antinous Mangragone 
profile"><br>
<a href="https://commons.wikimedia.org/wiki/File:Antinous_Mandragone_profil.jpg">
Antinous Mandragone</a>
</div>

The image would then be displayed in browsers as seen below:

Antinous Mangragone 
profile
Antinous Mandragone

But in HTML 5, the align attribute is deprecated. If I check a page containing the above HTML code with an HTML 5 validator, such as the World Wide Web Consortium (W3C) one at W3C Markup Validation Service, I will see the message below displayed for that code:

Error The align attribute on the div element is obsolete. Use CSS instead.

If I want to do the same thing in HTML5, I can use the Cascading Style Sheets (CSS) code below, instead:

<div style="text-align: center;">
<img src="186px-Antinous_Mandragone_profil.jpg" alt="Antinous Mangragone 
profile"><br>
<a href="https://commons.wikimedia.org/wiki/File:Antinous_Mandragone_profil.jpg">
Antinous Mandragone</a>
</div>

 

Antinous Mangragone 
profile
Antinous Mandragone

The "text-align: center" attribute for the div causes the text and the image to be centered on the page. If I wanted to center the image horizontally on the page without including it within a div, I could use CSS code such as the following:

<img style="display: block; margin: 0 auto;" 
src="186px-Antinous_Mandragone_profil.jpg" alt="Antinous Mangragone 
profile">

Antinous Mangragone 
profile

I need to include "display: block" because the text-align property applies to block containers, not inline elements such as img - see the W3C 'text-align' property.

But I can't use <div style="text-align: center;"> nor <div style="margin: 0 auto; text-align: center;"> to center Amazon banner ads, like the one at the top of this page. If I use those or the following code I hd been using in the style sheet, the ad image would always appear at the left side of the page. I had been using a div of <div id="adrow"> with the adrow id selector defined in the stylesheet as follows:

#adrow { width: 99%; margin: auto; margin-top: 15px; margin-bottom: 15px;
         text-align: center; }

 

That didn't work, but though I could still revert to the HTML 4 method for centering the Amazon banner ad on the page, I didn't want to go back to the deprecated <div align="center">.

At Amazon Associates Responsive Banners FAQ, Amazon has the following Frequently Asked Questions (FAQ) item:

11. I prefer inline banners. How do I make my content wrap / flow around the banner?

The JavaScript banners are already pre-formatted for being inline. Content can flow around these banners. The ad html is nested within a set of div tags that also specifies their alignment . the default is "left". You can modify this alignment to "center" or "right" to suit your needs.

Amazon surrounds the JavaScript banner ad code with <div class="alignleft"> and </div>, but doesn't provide the CSS code defining alignleft, center, or alignright. And none of the responses I found at the Amazon.com Associates forum page centering banner on my web site resolved the problem for me. I thought, perhaps, the Amazon employee who created the FAQ page assumed Amazon affiliates would be using a WordPress theme, or something similar, where the alignleft, center, and alignright classes were defined. I found those classes defined in the "WordPress Generated Classes" section of CSS « WordPress Codex at the WordPress site codex.wordpress.org, but using the class for aligncenter didn't fix the issue. However, I was able to resolve the problem and center Amazon banner ads, as well as other images, using CSS Flexbox. To use the Flexbox model, you fist need to define a container with <div class="flex-container">. So in my style sheet, I inserted the following code:

.flex-container {display: flex; justify-content: center;}

Then, in place of the <div class="alignleft"> that Amazon suggests for its banner ad Javascript code, I used <div class="flex-container">, which allowed me to center banner ads as well as images.

I also changed the adrow entry in the stylesheet to be the following code:

#adrow {display: flex; justify-content: center;
        margin-top: 15px; margin-bottom: 15px;}

To have a browser load the updated stylesheet rather than continue to use one its cached which doesn't have your updates, try Ctrl-F5, i.e., hit the Ctrl and F5 keys together, since F5 will reload the webpage, but not any stylesheets linked from the webpage.

Note:, if I tried to center multiple elements in the div, they would be placed horizontally beside one another with the group of them centered on the page. E.g., if I included the following HTML code immediately beneath the banner ad code, I would see the images and text displayed as below.

<br><br>
<img src="186px-Antinous_Mandragone_profil.jpg" alt="Antinous Mangragone
profile"><br>
<a href="https://commons.wikimedia.org/wiki/File:Antinous_Mandragone_profil.jpg">
Antinous Mandragone</a>

 



Antinous Mangragone
profile
Antinous Mandragone