tags:

views:

36

answers:

1

Hi,

I'm trying to center a single character, like this:

<div class='button'>x</div>
<div class='button'>+</div>
<div class='button'>*</div>

.button {
  border: solid 2px #aaa;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  color: #888;
  width: 16px;
  height: 16px;
  font-weight: bold;
  text-align:center;
  float: left;
  margin-right:5px;
  font:14px Helvetica Neue,Helvetica,Arial,sans-serif;
  line-height: 100%;
}

this centers the character in each div horizontally, but not vertically - what do we need to do to center it vertically as well?

Thanks

+1  A: 

Since it's a single character:

line-height: 100%;

and if setting line-height to 100% didn't work set it to the fixed height of the container:

.button {
    height:300px;
    width: 300px;
    text-align: center;
    line-height: 300px;
    border: 1px dotted #999;
}

Check here: http://jsfiddle.net/7afUH/1/

aularon
Ah ok that works, the button with the asteric won't work because I think it has a different line placing than the + and x. I updated the css above. Thanks.
I edited the answer, check now.
aularon
That's because the `*` character already look like this, it's in the upper part of the character space, if u need it to be in the center you need to do some padding for that specific character, or look for some similar unicode character that looks like it but it's bigger and fille the space instead of being at the top.
aularon
@user I've fiddled with the example a bit. Placing the `*` in a `<sub>` subscript element also appears to work.
Yi Jiang