Centering a div and an image within it using CSS

For webpages on this site, I used the following HTML code to center a div on the pages:

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

<p>
<img src="/images/mplogo-white.jpg" alt="MoonPoint Support Logo">
<p>

To make the code HTML 5 compliant, I added style="display: block; margin: auto;" within the img tags. I.e.:

<p>
<img src="/images/mplogo-white.jpg" alt="MoonPoint Support Logo">
style="display: block; margin: auto;">
<p>

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

<?php incfile("template/footer.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:

<div class="g-plusone" style="display: inline-block;"></div>

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:

  1. Center image using text-align center?
    Asked: August 14, 2011
    Referenced: February 15, 2016 Stack Overflow
  2. Horizontally center a div in a div
    Asked: September 22, 2008
    Referenced: February 15, 2016 Stack Overflow

 

Firstrade newegg.com

Justdeals Daily Electronics Deals1x1 px

Created: Monday February 15, 2016