Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3
Password Reminder
| 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 Search this Thread Display Modes
  #1 (permalink)  
Old March 30th, 2007, 11:20 PM
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 center text (only) in fixed size div, how to do it


i am creating a web page, and dont know how to center text in a fixed sized div, where font-size is defined in ems.

earlier in this forum i asked for centering the image and other elements , and i got the answer, but centering text is not going in the same way,

plz help me out, here is my try out code

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

ashok sharma

  #2 (permalink)  
Old April 16th, 2007, 01:38 PM
Authorized User
Join Date: Dec 2006
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts

I'm not an expert, but you've probably tried "text-align: center;" ??

What did it do?


Thread Tools Search this Thread
Search this Thread:

Advanced Search
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
How to center text/image/any object into a div beetle_jaipur BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 3 January 24th, 2013 01:25 PM
Help need fixed background on a scrollable div birthdayzoot CSS Cascading Style Sheets 3 June 20th, 2007 02:15 PM
Starting a fixed size browser window Loz Javascript How-To 12 April 18th, 2006 10:43 AM
Fixed size table amc Dreamweaver (all versions) 4 August 29th, 2004 07:03 AM
A fixed size Datagrid pbyrum General .NET 1 July 30th, 2004 09:56 PM

All times are GMT -4. The time now is 06:34 AM.

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