Cannot align image to middle

HTML & CSS
1

I have a basic HTML file I made. I am trying to get the image to align to the center. I think I did it just as W3C says, but its not working. When I view the page, right align works, but middle and left both align to the left. I don’t understand why.


<html>
<head>
<title>My Website</title>
</head>
<body>
<img src="images/myimage.png" style="float: middle;" alt="logo" height="50" width="394" />
<p style="text-align: center;">The website is currently being designed. Please check back later!</p>
<p style="text-align: center; font-size: x-small;">Copyright &copy; 2009 mywebsite.org<br />All Rights Reserved.</p>
</body>
</html>

I don’t know what I’m doing wrong. :frowning:

2

Well, I looked in my text book for class and I found a way around it.


<html>
<head>
<title>My Website</title>
</head>
<body>
<div style="text-align: center">
<img src="images/myimage.png" style="float: middle;" alt="logo" height="50" width="394
" />
</div>
<p style="text-align: center;">The website is currently being designed. Please check back later!</p>
<p style="text-align: center; font-size: x-small;">Copyright &copy; 2009 mywebsite.org<br />All Rights Reserved.</p>
</body>
</html>

Is this the correct way or am I wrong? This fix just came into my head, but I’m not sure if it’s correct.

3

The problem is you are using “float: middle;”, there is no such float value as middle which is causing the issue. Using the align: center on the div will work how you want (if in doubt, try it out), but with the align in place in the div, you may as well remove the ones on it’s children (the aligns in the p and that float in the img).

4

Try the following instead. All the style have been taking out of the html and placed in the head of the document: (I’ve added comments to the styles so you can see what rules style which elements on the page).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Website</title>

<style type="text/css">
/* top div holding the image */
#topcontainer {
    width: 100&#37;;
    text-align:center;
}

/* div to hold the bottom information - named it footer */
#footer {
    width: 100%;
}

/* styles the paragraphs in the footer - also aligns the text to center */
#footer p {
    font-size: 12px;  /* change font size as needed */
    text-align:center;
}
 
</style>
</head>
<body>
<div id="topcontainer">
<img src="images/myimage.png" alt="logo" height="50" width="394
" />
</div>
<div id="footer"> 
<p>The website is currently being designed. Please check back later!</p>
<p>Copyright &copy; 2009 mywebsite.org<br />All Rights Reserved.</p>
</div>  <!-- end footer -->
</body>
</html>
5

Thanks. My instructor said we can use CSS instead in the top of the file or in another file, but we won’t learn that until chapter 3 so right now I was using the style tags.

I will try these and see what happen. Thanks!

6

Hello RusticProgrammer,

In both the third and fourth edition(page 143) of her textbook, Wendy Willard suugests:

  1. tell browser to display what would NORMALLY be an inline image as a block element. in CSS, block elements will automatically fill the entire available space. So if an image becomes a block element, its margins will grow until they reach the edges of the browser window

display: block

  1. next…tell the browser to make BOTH the left and right margins the same… constructively, this centers the image

margin-left: auto
margin-right: auto

So…the CSS style code LOCATED within the <head></head> element and using “centered” as the CLASS would look like this—

img.centered {display:block; margin-left: auto; margin-right: auto;}

The HTML code within the <body></body> element would look like this—
<img src=“” alt=“” class=“centered” />