How to center text in a circle or box?

1

How can i center my text in the circle in the code below?

I was reading a lesson on creating a crescent moon but later thought to add text in the center of the circle. But for some reason i cant.

Link to the code: Edit fiddle - JSFiddle - Code Playground

Or code shown below

<style>

  .center {

    position: absolute;

    margin: auto;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    width: 100px;

    height: 100px;

    background-color: red;

    border-radius: 50%;

    box-shadow: 25px 10px 0px 0px blue;

    

  }

  .text {

    position: absolute;

    text-align: center;

    width: 100%;

    top: 50%;

        

  }

</style>

<div class="center ">

  <div class="text">dog</div>

</div>
2

Hi, i don’t know where you want to center the text,
but with that code you’re centering on the middle of the element, because the shadow it’s part of the element.
Try this way:
.text{

position: absolute;

top:17.3em;

left: 10.2em;

width: 100%;

}

3 
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    // Your styles....
}

and delete the .text styles.

1 Like
4

ummm the text vanished with your code. correction: i want to center the text in the circle

5

Thanks!!!

Cool it works. I thought its a impossible task when i was trying to find a solution on google. Can you please explain why you chose those codes.

Thanks a mil.

6

He used Flexbox properties.
It is a part of CSS, super helpful for position stuffs.
Learn about flexbox, as you get time, it will make your life little easier :stuck_out_tongue: