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:
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:
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>
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">
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>