• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 218
  • Last Modified:

centering an image

Hi,

I want to make a page that has a <div> that is as tall as all the content of my page, but is only 320px wide. I'd like my <p> paragraph text to auto wrap inside the <div>, but I'd like all my images horizontally centered in there. How do I do that? I've got some style stuff at the top of my page already like:

<style type="text/css">
    body {font-size: 12px; font-family: arial; background-color: #CCFFFF;}
</style>


so I'd like to stick wth that style of definition,

Thanks
0
DJ_AM_Juicebox
Asked:
DJ_AM_Juicebox
  • 2
1 Solution
 
athar_anisCommented:
0
 
athar_anisCommented:
0
 
myderrickCommented:
Try the code below to set the Div issue for your first problem....


Center image horizontally:
***************************************************
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel, nonummy a, ultrices a, justo. Ut pretium viverra neque. Nulla rhoncus tincidunt dui. Aliquam eu massa vitae dui imperdiet aliquet.

</p>
<img src="images/man.jpg" alt="About us" width="126" height="150"  style="padding: 23px 10px 5px 5px; display: block; margin-left: auto; margin-right: auto; " />
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel, nonummy a, ultrices a, justo. Ut pretium viverra neque. Nulla rhoncus tincidunt dui. Aliquam eu massa vitae dui imperdiet aliquet.

</p>

***************************************

With respect to the paragraph wrapping left or right: use floating the image right or left.

****************************************
eg <p><img src="images/yourimage.jpg" height="100" width="100" alt="your image" style="float:right; margin:5px 0 5px 5px; " />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel, nonummy a, ultrices a, justo. Ut pretium viverra neque. Nulla rhoncus tincidunt dui. Aliquam eu massa vitae dui imperdiet aliquet.</p>
****************************************
RIGHT---
.image_wrap {
float:right;
margin:10px;
}

<img src="image.jpg" width="190" height="241" alt="" title="" class="image_wrap" />
<p>Text that wraps around image.</p>

******************************************
More reading material:
http://www.garryconn.com/how-to-wrap-text-around-images-using-css-in-your-blog-posts.php
http://codex.wordpress.org/Wrapping_Text_Around_Images

http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

MD
 body{  
    text-align:center; /*For IE6 Shenanigans*/  
 } 
/* To fix IE Margin and padding troubles*/
*{  
   margin:0;  
   padding:0;  
} 
 
#wrapper{  
   width:320px;  
   margin:0 auto;  
   text-align:left;  
} 
/****The body tag encapsulates the wrapper, so the text alignment on it is inherited by the wrapper. Odds are you will want the text to be left-aligned. To do this we will need to  update the #wrapper styles to set the alignment back to the left.***/

Open in new window

0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now