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 h开发者_JAVA技巧orizontally, but not vertically - what do we need to do to center it vertically as well?
Thanks
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/
精彩评论