按钮文字未居中

Question

我创建了一个button，但是文字并没有真正居中。

图片未居中的按钮文字：-

.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>

Answer 1

你能检查一下下面的代码吗？希望它对你有用。我们有 flex 实用程序来解决您的问题。

.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

html

css

text

center

button