<style>
.image_Container {
display: block;
margin-left:auto;
margin-right: auto;
/* BONUS - Add a stylish border around your image */
border: 3px solid #FFFFFF;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.15);
/* For IE 8 */
border: 1px solid #EFEFEF;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC')";
</style>
...
<img class='image_Container' src='pictureUrl' />
As a bonus, I also included some CSS that will place a "stylish" border around the image, but feel free to drop that section if you'd prefer not to have a border around it.
Friday, March 14, 2014
Centering an image horizontally using CSS
If you ever need to horizontally center an image on your web page, here is a simple way to do that via CSS:
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.