CODEWITHSUNDEEP
htmlcsscenteringflexbox
dash
dash

Reputation: 1289

Center text character ☢ vertically and horizontally within a circle (CSS)

I am trying to center this text character ☢ within a circle. (☢)

While IE 10 displays the text vertically and horizontally centered, both Chrome and Firefox render too much padding at the top.

Any ideas how to fix this? (Flexbox is not a must have)

HTML

<div class="tl-icon">
<div>☢</div>
</div>

CSS

.tl-icon {
    align-items: center;
    background: black;
    border-radius: 50%;
    color: yellow;
    display: flex;
    font-size: 3em;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

See live demo here: http://codepen.io/dash/pen/ZYePWP

Upvotes: 5

Views: 4070

Answers (4)

paceaux
paceaux

Reputation: 1890

You've done everything correctly with your flexbox CSS.

The issue appears to be with line-height. You're using an html entity as text and it looks like .tl-icon is inheriting a value for line-height that doesn't work well.

Try adjusting your line-height, and using a unitless value for it. This way the line-height will compute to whatever the font size is for the interior element. 

.tl-icon {
    line-height:.9;
}

Upvotes: 0

ITroubs
ITroubs

Reputation: 11215

The problem is that the inner child is a text which screws with your height.

I added a line-height which seems to fix it a bit:

.tl-icon div{
  line-height:1px;
}

http://codepen.io/anon/pen/ZYePBZ

Upvotes: 3

lharby
lharby

Reputation: 3265

I had to fart about with the dimensions a bit, but this should center vertically and horizontally, so far tested in Chrome, FF and Safari.

http://codepen.io/anon/pen/gbmEWX

Set the parent to 

  display:table;

Child to 

 display:table-cell;
 vertical-align:middle;
 text-align:center;

Upvotes: 0

jmore009
jmore009

Reputation: 12933

Target that child div, set it to inline-block and change the vertical alignment:

.tl-icon div{
  display: inline-block;
  vertical-align: top;
}

CODEPEN

Upvotes: 1

Related Questions