We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

centering an image

Medium Priority
235 Views
Last Modified: 2013-11-19
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
Comment
Watch Question

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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.