html - Bootstrap 按钮的中心文本或内容

Question

尝试使下拉菜单的内容居中。添加 text-align: center 和 justify-contents: center 没有用。不幸的是，还为这些属性添加了 !important 到 css。

我的 HTML- 它有三个下拉菜单，具有相同的 HTML(下拉 div 重复了三次)。如果 Github 存储库更易于阅读，这里有一个:https://github.com/katez/Uni-Interview-Form-15-December-2017

.dropdown-item {
  font-family: OpenSans, sans-serif;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
}

.btn-secondary {
  width: 58px;
  height: 20px;
  color: #555555;
  background-color: #FFFFFF;
  border: 1px solid#CCCCCC;
  border-radius: 2px;
}

<main class="card-contents">
  <p>EXCEL</p>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" 
            type="button" 
            id="dropdownMenuButton" 
            data-toggle="dropdown" 
            aria-haspopup="true" 
            aria-expanded="false">+</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">+</a>
      <a class="dropdown-item" href="#">++</a>
      <a class="dropdown-item" href="#">+++</a>
    </div>
  </div>
  </div>
</main>

Answer 1

在 Bootstrap 中，你必须像这样在下拉菜单中使用波纹管类

<div class="dropdown-menu text-center" aria-  labelledby="dropdownMenuButton"> 
    <a class="dropdown-item" href="#">+</a>
    <a class="dropdown-item" href="#">++</a> 
    <a class="dropdown-item" href="#">+++</a> 
 </div>