All geek questions in one place

How can I get one character to be equally centered in all browsers and operating systems?

I am using border-radius CSS3 to create circular buttons on this site:

http://hexpreview.com/

However, due to differences in font rendering between Mac and Windows (not between browsers), centering of button text within its circle is limited. Buttons display correctly in all browsers that support CSS3 on Windows, but not on OS X or Linux.

Here is some simpler code that reproduces the problem somewhat:

<html> <head> <title>Rounded Buttons Example</title> <style type='text/css'> div {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 have been struggling with this for a while, and it starts to get confused. 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 problem (centering also does not work in square buttons). Any ideas?

EDIT

I want to clarify that I want the buttons to be in the exact center of the circular border. The main problem is vertical centering, because the font heights differ on OS X and Windows, even if the line height and font size are specified. I am fine with a solution that includes manually positioning a character inside a button, but I also tried to manually focus on one OS, which negatively affects others.

+4
source share
2 answers

I found a problem. The font on the original page is declared as "Helvetica, sans-serif". There is no Helvetica on Windows, so this is a rendering in Arial. All Mac browsers are processed in Helvetica, so there are problems with rendering. Changing to "Arial, sans-serif" fixes the problem.

+1
source

uh

 div {text-align: center;}

?

I'm missing something here ...

Alternatively, you can wrap the <a> tags in <p> tags and set text-align: center to the <p> .

EDIT

After further viewing your page, it looks like you are trying to focus on something absolutely positive. It's complicated. Make sure you do not declare the <a> tag as display:block , and you can center it, because by default the <a> tags are inline.

EDIT 2

After a further FURTHER review, all you have to do is set the #help rule to left: 50% and get rid of your right rule. This centers it just fine even when absolutely positioned :)

0
source

Source: https://habr.com/ru/post/1299395/

More articles:


All Articles