CODEWITHSUNDEEP
css
user246114
user246114

Reputation: 51661

Center single character of text vertically?

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

Upvotes: 3

Views: 1960

Answers (1)

aularon
aularon

Reputation: 11110

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/

Upvotes: 1

Related Questions