Hi,
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
regards,
ashok sharma
center text (only) in fixed size div, how to do it
