Text and div are not centered perfectly

Question

.status-sign {

    width: 12px;

    height: 12px;

    border-radius: 100%;

    background-color: rgb(50, 255, 50);

}

    <div class="status-online">
                            
          <div class="status-sign"></div>
                            
          <div class="status-text">Çevrimiçi</div>
                        
     </div>

I want to center status-sign and status-text elements perfectly, but somehow it is not perfectly aligned. Here you can see how it looks like:

How can I make them centered perfectly?

Answer 1

Just add margin: 0 auto; to center the status-sign and text-align:center to center your status-text.

.status-sign {

    width: 12px;

    height: 12px;

    border-radius: 100%;
    
    margin: 0 auto;

    background-color: rgb(50, 255, 50);
    
    }
    
.status-text {
    text-align: center;
    }

<div class="status-online">
                        
      <div class="status-sign"></div>
                        
      <div class="status-text">Çevrimiçi</div>
                    
 </div>