Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3
This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design by Richard York; ISBN: 9780764576423
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Display Modes
  #1 (permalink)  
Old March 29th, 2007, 03:08 AM
Authorized User
 
Join Date: Feb 2006
Location: jaipur, rajasthan, India.
Posts: 67
Thanks: 7
Thanked 0 Times in 0 Posts
Send a message via Yahoo to beetle_jaipur
Default How to center text/image/any object into a div

hi

i have stuck with a simple problem

in a div i want to center (vertical and horizontal)my paragraph / image / table, but unable to find how to do it

i have to confirm it into both firefox and ie6

all suggestions are welcome

thanks in advance
ashok sharma

  #2 (permalink)  
Old March 29th, 2007, 08:28 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

It's very simple, really.

It's all done with positioning.

Assume that you have the following markup:
Code:
<div id='container'>
    <div id='aligned'></div>
</div>
Apply the following CSS:
Code:
div#container {
    position: relative;
    height: 600px;
    border: 1px solid gold;
}
div#aligned {
    position: absolute;
    border: 1px solid yellow;
    background: lightyellow;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin: -101px 0 0 -101px;
}
This assumes that your container either has a height larger than the positioned child naturally, or you've set a fixed height for it that's larger than the height of the positioned child. You can also just do away with the container, and the child will be centered vertically and horizontally respective to the browser's viewport.

The theory is pretty simple, you give the absolutely positioned child a fixed width and height of some kind, then adjust its top and left margins negatively by exactly half of it's width and height (taking borders and padding into account). So if you have a collective height of 202 pixels (200-pixel height and 2-pixel border), you adjust the top margin by -101px. And the same for the width. And the same technique works for images, paragraphs, etc. Won't work on tables because tables cannot be positioned.

HTH!


Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design, 2nd Edition
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html
  #3 (permalink)  
Old March 30th, 2007, 02:57 AM
Authorized User
 
Join Date: Feb 2006
Location: jaipur, rajasthan, India.
Posts: 67
Thanks: 7
Thanked 0 Times in 0 Posts
Send a message via Yahoo to beetle_jaipur
Default

Thanks Rechard,
thanks for you attention

that was quite a useful information, now i can do centrally aligned (div/image), but could not find the way to center text (vertically)

probably i am not getting it right, if you can plz help me out

objective : to make a clickable tab for navigation link (for web page)
using : left image for left side of tab, a repeating image for content of the tab and the text is the center div and finally right image

Problem : my text is not in the center of the container div

Code i am using :

1. body {
2. margin: 0; padding: 0;
3. font: smaller "Lucida Grande", Verdana,Arial, sans-serif;
4. font-size:12px; /* i do not want to define font size */
5. }

6. #TopMenuBar {
7. float:right;
8. }


9. #TopMenuLeft, #TopMenuRight {
10. width:10px;
11. height:38px;
12. float:left;
13. }

14. #TopMenuLeft {
15. background-image:url(Media/Images/TabLFill.gif);
16. background-repeat:no-repeat;
17. }

18. #MainFillBox {
19. position:relative;
20. height:38px;
21. float:left;
22. background-image: url(Media/Images/TabMFill.gif);
23. background-repeat: repeat-x;
24. }

25. p#aligned {
26. height:38px;
27. position:absolute;
28. top:50%;
29. margin-top: -14px;
30. margin-left: 0px;
31. margin-right: 0px;
32. margin-bottom:0px;
33. }

34. #TopMenuRight {
35. background-image:url(Media/Images/TabRFill.gif);
36. background-repeat:no-repeat;
37. }

38. </style>
39. </head>

40. <body>
41. <div id="TopMenuBar">
42. <div id="TopMenuLeft"></div>
43. <div id="MainFillBox"><p id="aligned">Last Tab (Right Side)</p></div>
44. <div id="TopMenuRight"></div>
45. </div>
46. <div id="TopMenuBar">
47. <div id="TopMenuLeft"></div>
48. <div id="MainFillBox"><p id="aligned">Second Tab</p></div>
49. <div id="TopMenuRight"></div>
50. </div>
51. <div id="TopMenuBar">
52. <div id="TopMenuLeft"></div>
53. <div id="MainFillBox"><p id="aligned">First Tab</p></div>
54. <div id="TopMenuRight"></div>
55. </div>

56. </body>


Output : all three tabs are in the order (left-jumbledtext-right)

if i remove line no 27, 28, then i can adjust margins and bring my text up or down, but not exactly centered,
and what if, i do not define font-size and user change the text-size from browser then how can it be vertically centered. in that case how to calculate margins for <p> tag.


Thanks for your consideration and for the suggestions

regards,
ashok sharma
  #4 (permalink)  
Old January 24th, 2013, 12:25 PM
Registered User
Points: 3, Level: 1
Points: 3, Level: 1 Points: 3, Level: 1 Points: 3, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2013
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

1) everything inside div
Code:
<div align="center"> </div>
2) For simple text:
Code:
<center> dddddddd </center>
3) for images or frames
Code:
<img style="display:block;margin-left:auto;margin-right:auto;" align="center" src="xx.jpg" />
 


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Center Text within Label testsubject Visual Studio 2005 5 October 15th, 2011 12:59 PM
How to center the header image kherrerab BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 2 May 29th, 2010 11:51 PM
center text (only) in fixed size div, how to do it beetle_jaipur BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 1 April 16th, 2007 01:38 PM
Center Text In ComboBox wb8bgy Visual Basic 2005 Basics 3 March 2nd, 2007 08:06 AM
how to print image at center of paper EXACTLY guntank C# 2005 1 September 24th, 2006 04:43 AM



All times are GMT -4. The time now is 02:53 PM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.