ansaurus

Question

How can I get a single character to center identically in all browsers and operating systems?

Answer 1

A:

uh,

div {text-align: center;}

?

I have to be missing something here...

Alternatively, you could wrap your <a> tags in <p> tags and set text-align: center on the <p> tag.

EDIT

Upon further review of your page, it appears you're trying to center something that is absolutely positioned. This is difficult. Make sure you're not declaring your <a> tag as display:block and you can center it because <a> tags are inline by default.

EDIT 2

Upon further FURTHER review, all you need to do is set your #help rule to left: 50% and get rid of your right rule. That will center it just fine even while absolutely positioned :)

Jason 2010-01-26 02:17:46

I think you're on the right track. Center the text on the `div`, not the `a` tag, like he currently is.

Kyle Trauberman 2010-01-26 02:20:33

I'll try this, but it doesn't affect the vertical positioning. I'm fine with manually setting margins so that things look centered, but I haven't figured out a way to do this that displays the same on Windows, OS X, and Linux.EDIT -- Applying text-align:center to the containing divs does not have any effect.

vamin 2010-01-26 02:30:00

how would you like the items to be vertically positioned? all you mentioned was centering...

Jason 2010-01-26 02:32:48

Centered vertically and horizontally. If you look at the site in Windows, you will see what I mean. On the Mac, the question mark is too high in Firefox and the + is too low in Chrome.

vamin 2010-01-26 02:35:44

ps i'm on a PC so i'd have no way to recreate your mac issues. maybe you should not spend 90% of your time worrying about what less than 8% of users see :)

Jason 2010-01-26 02:35:50

i'm not sure exactly what you mean... your textbox sits right in the middle of your page... how could you vertically and horizontally center 3 elements? only 1 will be able to sit in the exact middle of the page, unless you want to layer them w/z-indexes

Jason 2010-01-26 02:38:09

I'm not trying to center the buttons relative to the window. I'm trying to center the text inside them relative to the circular border. The '+' button looks really funny if the '+' is not exactly in the middle of the circle. Also, 45% of my visitors use OS X :)

vamin 2010-01-26 02:43:43

ohhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh.......... i thought you were trying to center the buttons themselves on the page... hrm... well i guess i can't help you here because they look fine to me... :\ good luck!

Jason 2010-01-26 03:13:12

Thanks for trying!

vamin 2010-01-26 03:32:34

ps... why not just use image sprites? it's not like "?" and "+" are going to be useful to someone who sees your page sans CSS anyways...

Jason 2010-01-26 05:50:12

If you're not averse to javascript, and you really don't want to use an image, you could try using javascript. Absolute positioning using javascript could get you exactly what you want at the cost of some performance. Maintenance shouldn't be a big problem if you make it as something like a jquery plugin that works on elements marked with a certain css class.

jthg 2010-01-26 19:47:01

Answer 2

+1 A:

I found the problem. The font in the original page is declared as "Helvetica, sans-serif". Windows doesn't have Helvetica, so it's rendering in Arial. All the Mac browsers are rendering in Helvetica, hence the rendering issues. Changing to "Arial, sans-serif" fixes the problem.

vamin 2010-01-30 20:05:21

ansaurus

tags:

views:

answers:

How can I get a single character to center identically in all browsers and operating systems?

related questions