<div id="header" align="center">
That didn't produce any error messages when I used the HTML 4.01 document type (doctype) declaration below as the first lines in the HTML file when I checked the page for errors using the W3C Markup Validation Service.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">However, when I wanted to convert the pages to make them valid for HTML 5 and put <!DOCTYPE html> as the first line in the file, instead, I saw the following error message reported by the validation service:
The align attribute on the
div
element is obsolete.
Use CSS instead.
From line 20, column 1; to line 20, column 32
↩↩<body>↩↩<div id="header" align="center">↩↩<scr
At CSS Layout - Horizontal Align, I found the following:
Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Use margin: auto;, to horizontally center an element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the two margins:
Tip: Center aligning has no effect if the width property is not set (or set to 100%).
I had the following code in the style.css style sheet I
used for the site for the header id:
div#header {
clear: both;
height: 140px;
/* background-color: aqua; */
padding-top: 1px;
padding-bottom: 30px;
padding-right: 1px;
padding-left: 1px;
margin-top: 5px;
}I added the following two lines after the "margin-top: 5px;":
margin: auto;
width: 99%;
I then found after removing align="center" from
<div id="header" align="center">
that an image I had within the div was no longer
being centered, but was, instead at the left side of the page. It was within
the div as shown below:
To make the code HTML 5 compliant, I added style="display: block;
margin: auto;" within the
img tags. I.e.:
That eliminated the error message for the line when I checked the page with the W3C Markup Validation Service and also resulted in the image being centered on the webpage.
I also had another error related to use of align="center"
when I was attempting to make pages HTML 5 compliant. I had a footer section
at the bottom of pages that used that method of aligning elements at the
bottom of every page and so saw the following:
The align attribute on the
div
element is obsolete.
Use CSS instead.
From line 259, column 1; to line 259, column 32
016</p>↩↩↩<<div id="footer" align="center">↩↩<!--
In the style.css file, I had the following code for
footer:
div#footer {
margin-top: 25px;
clear: both;
}I include the footer section in every page with the PHP code below (see Including Files in a Web Page with PHP):
In the footer section for webpages, I had the following HTML code, which includes a Google plus one button.
<div id="footer" align="center">
<!-- Start Google +1 button -->
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
window.___gcfg = {
lang: 'en-US'
};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- End Google +1 button -->
<p> </p>
<?php
$thisfile = pathinfo($_SERVER['PHP_SELF']);
echo "Last modified: ".date("l F j, Y g:i A",
filemtime($thisfile["basename"]));
?>
</div>The section of PHP code at the bottom just prints the last time the web page
was modified by looking at the modification time stamp on the file. Since
it is just text, it was easy to center after I removed the align="center"
from the outermost div. If you have text in a paragraph that
you want to center within the paragraph, you can use
<p style="text-align: center;">.
To center the plus one code on the web page, though, I had to modify
the style.css file and include
width: 100%; text-align: center; in the definition of footer.
I.e., I changed footer to be the following:
div#footer {
margin-top: 25px;
clear: both;
width: 100%; text-align: center;
}Then in the inner div for the Google plusone code, I put
style="display: inline-block" in the div to center the display of
the Google +1 button within the page:
For an Amazon ad row, I was able to center the ad displayed by adding
width: 100%; text-align: center; to the definition for it
in the style.css file.
#adrow { margin-top: 15px; margin-bottom: 15px;
width: 100%; text-align: center; }References:
Created: Monday February 15, 2016