中心文本或引导按钮的内容

Question

尝试将下拉菜单的内容居中。添加text-align：center和justify-contents：center没有用。还添加了！重要的是css这些属性没有运气。

我的HTML-它有三个下拉列表，使用相同的HTML（下拉列表重复三次）。如果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中你必须在下拉菜单中使用bellow类，如下所示

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

Answer 2

您是否一定希望按钮为矩形？你的身高参数会导致问题......这个怎么样：

#dropdownMenuButton {
  text-align:center;
  padding: 3px 15px 3px 15px;
}

Codepen链接： https://codepen.io/anon/pen/JMKqoa