How to center text/image/any object into a div

beetle_jaipur · March 29th, 2007, 03:08 AM

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

richard.york · March 29th, 2007, 08:28 AM

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

beetle_jaipur · March 30th, 2007, 02:57 AM

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

tazosmr · January 24th, 2013, 01:25 PM

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" />