Position text in absolute center of html element

Question

Hi I'm trying to make a very simple x delete button i can use throughout this site i am building however, I can't ever seem to get it properly positioned...

This is it so far:

<button id="clear-input-location" name="clear-input-location">×</button>


#clear-input-location {
    display:block;
    background: #CCC;
    color: #FFF;
    border: none;
    font-weight: bold;
    font-size: 20px;
    border-radius: 20px;
    line-height: 0;
    height: 26px;
}

see the fiddle here: http://jsfiddle.net/kpheR/

@AndréFigueira If you want **exactly** the result as design, you should work with images. — , Jun 20 '13 at 13:17
@NOX you don't always need to rely on images... It is possible to get very good results with html and css which are cross browser compatible which in turn means less http requests or if using sprites, smaller sprite file sizes... — André Figueira, Jun 20 '13 at 13:20
I agree with @NOX, you should do images if you want it pixel perfect. Fonts/text are notoriously innacurate between browsers on the pixel level because each browser uses a different text-rendering engine which causes them to render text in slightly different ways (slightly different sizes and such) which will make pixel perfection difficult at best. Nonetheless, removing the `font-weight: bold;` rule shows that it is centered, it just grows to the bottom and right due to the bolding (in Chrome 27). — ajp15243, Jun 20 '13 at 13:22
You should match the `line-height` with the `height` attribute (26px) http://jsfiddle.net/kpheR/5/ — yoavmatchulsky, Jun 20 '13 at 13:26

score 2 · Answer 1 · answered Jun 20 '13 at 13:12

2

Try this

<div class="a">
  <button id="clear-input-location" name="clear-input-location">×</button>
</div>

.a{
  text-align:center;
 }

Demo

answered Jun 20 '13 at 13:12

Amit

14,671
8
41
63

Doesn't solve the problem... there isn't a horizontal alignment issue, but a vertical one. – André Figueira Jun 20 '13 at 13:18

score 0 · Answer 2 · answered Jun 20 '13 at 13:09

0

add margin: 0 auto; style to your text, this will center horizontally.

answered Jun 20 '13 at 13:09

Praveen

50,562
29
125
152

Doesn't solve the problem... there isn't a horizontal alignment issue, but a vertical one. – André Figueira Jun 20 '13 at 13:19

score 0 · Answer 3 · answered Jun 20 '13 at 13:21

0

I have solved the problem by wrapping the × in a span then styling the span within to position the X properly. thanks anyway.

If anyone else needs this:

http://fiddle.jshell.net/kpheR/3/

answered Jun 20 '13 at 13:21

André Figueira

4,802
11
40
60

Well, for me, that is offset way too much to the top and right. – ajp15243 Jun 20 '13 at 13:23
Looks fine on Chrome, I'm still going to now to other browser styles so it works everywhere... – André Figueira Jun 20 '13 at 13:30
Well, if you're happy with it... just be aware that fonts even vary between operating systems, not just between browsers. – ajp15243 Jun 20 '13 at 13:32

score 0 · Answer 4 · answered Jun 20 '13 at 13:22

0

Try

.center-text {

text-align: center;
vertical-align: middle;

}

answered Jun 20 '13 at 13:22

Peter Berg

5,403
7
31
48

Position text in absolute center of html element

4 Answers4