Responsive and automatic CSS

Question

I'm doing a website and I'm creating the navbar. One of the option should be the link to the user menu, and I want to put a circle with the first character of user's name inside. I have problems to center the character into circle.

I have just get this with full screen:

It is not centered at all but it's not bad.

If I try to vie the web with a small screen, the navbar is responsive (I use bootstrap but I don't see the circle correctly. This is how I see the circle:

You can see that the character is not centered.

This is my code:

.logo-perfil{
        display: flex;
        justify-content: center;
        font-size:30px;
        color:White;
    }

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container rounded-circle" style="background-color:Grey;width:60px;height:60px;"><span class="logo-perfil">M</div></div>

I use Bootstrap and some personalized CSS but, what can I do to center the character always?

Thanks for your help!

score 3 · Accepted Answer · answered Jul 09 '18 at 09:47

This works for me:

.logo-perfil {
  background-color: grey;
  color: white;
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  font-size: 30px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container rounded-circle"><span class="logo-perfil">M</div></div>

Responsive and automatic CSS

1 Answers1