CODEWITHSUNDEEP
htmlcsspositioningcentering
It worked yesterday.
It worked yesterday.

Reputation: 4617

centering an element in css circle (width and height given by ems)

hello I am trying to center an element inside a css circle. I tried few difference ways, but didn't get it working.

Here an JsFiddle example

HTML

<div class="large-columns">
        <div class="circle-holder">
                <span class="circle"><h1>h tag</h1></span>
        </div>                  
</div>

CSS

.circle {
    display: block;
    width: 10em;
    height: 10em;
    background: red;
    position: relative;
    border-radius: 50%;
}    
    h1 {
      text-align: center;
      position: absolute;
      top: 50%;

}

Upvotes: 2

Views: 1224

Answers (3)

Sven van Zoelen
Sven van Zoelen

Reputation: 7229

If the to be aligned element is an inline-block, then you can do it with line-height.

Update your CSS code to this:

.circle {
    display: block;
    width: 10em;
    height: 10em;
    border-radius: 50%;

    line-height: 10em;
    text-align: center;

    background: red;
}

JsFiddle Example

Upvotes: 5

BitLion
BitLion

Reputation: 103

change position: in h1 to relative. After that I would explicitly define the top to 60px; which would center the header.

JSFiddle

EDIT:

You can also change the top in CSS with percent values as well.

Upvotes: 0

Aravind30790
Aravind30790

Reputation: 992

css 

    h1 {
      text-align: center;
      position: relative;
      top: 50%;
}

change to position:relative check THIS

Upvotes: 0

Related Questions