How can I get a single character to center identically in all browsers and operating systems?
I'm using CSS3 border-radius to create circular buttons on this site:
http://hexpreview.com/
However, due to font rendering differences between Mac and Windows (not between browsers), the centering of the button's text within its bounding circle is inconsistent. Buttons render properly in all CSS3 capable browsers in Windows, but not in OS X or Linux.
Here is some simpler code that somewhat reproduces the problem:
<html>
<head>
<title>Rounded Buttons Example</title>
<style type='text/css'>
d开发者_Python百科iv {padding:1em; margin:1em}
a {text-decoration:none; color:#000;}
#help_link, #add_link {
display:block;
height: 1.4em;
width: 1.4em;
text-align:center;
line-height: 1.4;
font-size:1.5em;
padding:0;
border:.1em solid #000;
-moz-border-radius:.8em;
-webkit-border-radius:.8em;
border-radius:.8em;
}
#help_link:hover, #add_link:hover {
border-width:.15em;
margin:-.05em;
-moz-border-radius:.85em;
-webkit-border-radius:.85em;
border-radius:.85em;
}
</style>
</head>
<body>
<div>
<a id='help_link' href='#'>?</a>
</div>
<div>
<a id='add_link' href='#'>+</a>
</div>
</body>
</html>
I've been struggling with this for awhile, and it's starting to get messy. If this were a problem related to the CSS3 specification, I would probably let it go, but it seems to me that this is a cross-browser font issue (centering doesn't work in square buttons either). Any ideas?
EDIT
I'd like to clarify that I want the buttons to be in the exact center of the circular border. The main problem is vertical centering due to font heights being different in OS X and Windows even when line-height and font-size are specified. I am ok with a solution that involves manual positioning of the character within the button, but I've tried and manual centering on one OS is adversely affecting the others.
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.
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 :)
加载中,请稍侯......
精彩评论