CODEWITHSUNDEEP
htmlcss
Warface
Warface

Reputation: 5119

Center character inside a span with same width and height

I'm trying to center characters inside a span.

CSS

span{border-radius:10px; width:20px; height:20px; color:#fff; background:#cc0000; text-align:center; line-height:20px; display:block;}

HTML

<span>+</span><br>
<span>-</span>

As you can see, the characters are a little bit off on the bottom right. How to perfectly center align that ?

http://jsfiddle.net/5U7qj/

Upvotes: 0

Views: 481

Answers (1)

Matthew R.
Matthew R.

Reputation: 4350

It is because you are using an even value for your height and width. Since the characters are only 1 pixel in thickness it will look off until you either change them to a 2 pixel thickness or change the width, height and line-height to be an odd value. Here is the updated fiddle

Upvotes: 1

Related Questions