Button text not centered

Question

I created a button, but the text is not really centered.

Picture of not centered button text:-

.navbar-toggler-icon {
    display: inline-block;
    width: 3.5em;
    
    vertical-align: middle;
    content: "";
    background: 50% / 100% 100% no-repeat;
}

<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon">Menu</span>
        </button>

Use chome or firefox's inspect element feature to identify what is the code overriding button's CSS code. Since you have not posted full code of the button, we are at limited capacity to help. — CodeMonkey, Mar 17 '21 at 04:49

score 1 · Accepted Answer · answered Mar 17 '21 at 04:50

Can you please check the below code? Hope it will work for you. We have flex utility to solve your issue.

.navbar-toggler-icon {
  display: inline-flex;
  width: 3.5em;
  vertical-align: middle;
  content: "";
  background: 50% / 100% 100% no-repeat;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center; 
}

Button text not centered

1 Answers1