Here are 3 methods for centering images or any element, id or class...
(This also works for any html element, id, or class)
You want to place a "box" and an image on a web page. AND, you want them centered.
Method #1: Absolute, Auto and 0 (zero)
(Click on the image to see the web page)
SOLUTION
Make the Box and the image have the property, position and value, absolute; and Set the margin: auto; but set the Top, Right, Bottom and Left positions to 0 (zero). Source Below!
<style type="text/css">
body {text-align: center;
margin: 0 auto;
}#largebox {
text-align: left;
width:500px;
height:400px;
background-color:#407751;
border:dotted #000000 1px ;
position: absolute;
margin: auto;
left:0; right:0;
top:0; bottom:0;
}/* instead of making the image an id, you can target the image by using the descendant relationship #largebox img {} */
#smallimage {
background-color:#F00;
border:solid #fff 2px ;
position: absolute;
margin: auto;
left:0; right:0;
top:0; bottom:0;
}</style>
</head>
<body>
<h2>Method 1: Absolute, Auto and 0 (zero)</h2>
<p style="text-align:left; text-indent:5em;">Make the Box and the image have the property and value position: absolute; and Use Margin: auto; but set the Top, Right, Bottom and Left positions to 0 (zero). Check out the embedded source!
</p>
<p>Check to see if this works in all browsers!</p>
<div id="largebox">
<img src="../imageproc/thumbsize/200pixels.jpg" alt="A thumbnail 200 pixels wide of MoultonFalls Moss" width="200" height="133" id="smallimage" />
</div>
</body>
</html>
As Always Check to see if this works in all browsers!
------------------------------------------------------------------------------------------------------------
Method #2: The 50% Solution
(Click on the image to see the actual page)
For Absolute Position, set Top, Right, Bottom and Left to to 50% Percent
Subtract from margin-top, margin-right, margin-bottom and margin-left 1/2 (50%) of the width and height of the image in pixel units. Check out the source below!
<style type="text/css">
body {text-align: center;}
#largebox {
text-align: left;
width:500px;
height:400px;
background-color:#CFF;
border:dotted #000000 1px ;
position:absolute;/* Apply the 50% rule */
left: 50%;
top: 50%;
right:50%;
bottom:50%;/*Subtract 50% (1/2) the width and height of the image or element
the minus sigh moves the element to the left */
margin-left: -250px;
margin-top: -200px;
margin-right: -250px;
margin-bottom:-200px;}
#smallimage {
background-color:#F00;
border:solid #000000 2px ;
position:absolute;
left: 50%;
top: 50%;
right:50%;
bottom:50%;
margin-left: -100px;
margin-top: -66px;
margin-right: -100px;
margin-bottom:-66px;}
</style>
</head><body>
<h2>Method 2: The 50% Solution</h2><h3></h3> Using Absolute, 50% Percent and subtract 1/2 (50%) of the width and height of the image</h3>
<p style="text-align:left; text-indent:5em;">Make the Box and the image have the property and value position: absolute; set the Top, Right, Bottom and Left positions to 50% and subtract from margin-top, margin-right, margin-bottom and margin-left 1/2 (50%) of the width and height of the image in pixel units. Check out the embedded source!
</p>
<p>Check to see if this works in all browsers!</p><div id="largebox">
<img src="../imageproc/thumbsize/200pixels.jpg" alt="A thumbnail 200 pixels wide of MoultonFalls Moss" width="200" height="133" id="smallimage" />
</div></body>
</html>
--------------------------------------------------------------------------------
Method #3: Use Display: Block;
Click on the image to see the actual web page.
Tricky... The key to centering an image on a web page is that by default an image is an inline element.
"Inline Elements always begin on the same line. Height, line-height and top and bottom margins can’t be changed. Width is as long as the text/image and can’t be manipulated!"
Unless you change the image to act like a block element using the Property and Value display:block;
You could put the image in a div, but why add a div when you don't need it? PLease report if the above works in your browsers! Thanks. The source is below...
<style type="text/css">body {text-align: center;
text-indent: 5em;
margin: 0 }#largebox {
text-align: left;
width:500px;
height:400px;
background-color:#999288;
border:dotted #000000 1px;
margin: 0 auto;
}#smallimage {background-color:#F00;
background-color:#CFF;
border:solid #fff 4px;
display: block;
margin: 120px auto ;}
</style>
</head><body>
<h2>Centering an image using display: block;</h2>
<p style="text-align:left;">Tricky... The key to centering an image on a web page is that by default an image is an inline element. </p>
<blockquote style="text-align:left;"> <em><strong>"Inline Elements always begin on the same line. Height, line-height and top and bottom margins can’t be changed. Width is as long as the text/image and can’t be manipulated!"</strong></em></blockquote>
<p style="text-align:left;">Unless you change the image to act like a block element using the Property and Value <em><strong>display:block;</strong></em></p><p style="text-align:left;">You could put the image in a div, but why add a div when you don't need it?</p><div id="largebox">
<img src="../imageproc/thumbsize/200pixels.jpg" alt="A thumbnail 200 pixels wide of MoultonFalls Moss" width="200" height="133" id="smallimage" /></div>
</body>
</html>
as always, have fun!
No comments:
Post a Comment