align="center" workaround

Question

I am using a template that I didn't create myself for a Joomla based website. I am trying to center a jquery menu and have spent hours going through all of the code and css and can't seem to find out how to do it! so, I've decided to create a little work around. I made a blank png image and put it to the left of the menu and have made it's width equal to the offset I want. This little hack works fine except that not all screens are the same size and so it isn't actually centered on most screens. I was wondering if anyone knew a dynamic way to calculate what exactly the center is so I can change the width of the blank png dynamically to that when the page loads?

Hope that makes sense and any help would be greatly appreciated

why dont you inspect the css with firebug or chrome and then add a css record that changes the element you want? — Naftali, Jun 17 '11 at 14:29

score 3 · Answer 1 · answered Jun 17 '11 at 14:23

3

How about

  margin-left: auto;
  margin-right: auto;

answered Jun 17 '11 at 14:23

Petteri H

11,779
12
64
94

score 2 · Answer 2 · answered Jun 17 '11 at 14:23

2

CSS For Centering an Element:

#elementID {
    margin: 0 auto;
}

I read in places that the element needs to have the CSS width property set for this to take effect, but I have found that this is not always the case.

answered Jun 17 '11 at 14:23

Jeff Lambert

24,395
4
69
96

score 1 · Answer 3 · answered Jun 17 '11 at 14:25

1

Either:

margin-left: auto;
margin-right: auto;

Or

margin: 0 auto;

Will work. :)

answered Jun 17 '11 at 14:25

Magnum26

265
2
13

score 1 · Answer 4 · answered Jun 17 '11 at 14:48

place it in div with a div wrapper i.e.

<div id = "mainWrapper">

   <div id = "leftColumn"></div><!-- end leftColumn -->

   <div id = "centerColumn">
     <!-- Put you menu item in here -->
   </div><!-- end centerColumn -->

   <div id = "rightColumn"></div><!-- end rightColumn -->

</div><!-- end main wrapper -->

css as follows #mainWrapper { float:left; width:100%; } #leftColumn { float:left; width:25%; } #centerColumn { float:left; width:50%; } #rightColumn { float:left; width:25%; }

score 0 · Answer 5 · answered Jun 17 '11 at 14:26

The typical way to center an element using CSS is with margin-left:auto; margin-right:auto;.

In addition, the element needs to be displayed as a block and have a fixed width.

So your CSS would look something like this:

.myelement {
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:100px;
}

Hope that helps.

score 0 · Answer 6 · answered Jun 17 '11 at 14:29

while

margin:0 auto

works with the main container of the site (the parent of this container is the body), it get a little wonky when you have it inside containers, like i sounds you do.

try something like this since you know the width:

#selector{
    width:500px; /* however wide the element is */
    position:absolute;
    top:20px; /* This is whatever you want */
    left: 50%;
    margin-left:-250px; /* this is half of the width */
}

score 0 · Answer 7 · answered Jun 17 '11 at 14:29

0

Try inspecting the css with firebug or chrome and then add a css record that changes the element you want

answered Jun 17 '11 at 14:29

Naftali

144,921
39
244
303

@Phil, no this is an answer. That could be the issue. – Naftali Jun 17 '11 at 14:36

align="center" workaround

7 Answers7