css - 行内的元素居中对齐

Question

我想要的是这些圆圈居中对齐，我尝试使用一些显示内联 block 但没有影响它和其他一些使居中对齐的属性但我失败了 picture of those circles 我已经整天都在搜索这个了:s

如何在这方面帮助我？ 非常感谢您的帮助。

谢谢

.menu{
    width:70px;
    height:70px;
    border-radius:50px;
    font-size:20px;
    color:green;
    line-height:100px;
    background:#32C947;
    overflow: hidden;
    list-style-type: none;
    margin-left: auto;
    margin-right: auto;
    display: table-cell;
    vertical-align: middle;
}

.menu:hover{
    color:#ccc;
    text-decoration:none;
    background:#333
}

 

<div class = "container">
  <div class="row ">
        <div class="col-md-12 ">
          <h1 class = "_font ">All Plans Include</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Hello</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 ">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>   
      </div>
    </div>

Answer 1

对于一个圆的父 div 你必须给一些 width 属性并使用 这和 margin: 0 auto;。我希望这会奏效。

在你的代码父 div .col-md-1 中。所以你必须再创建一个 div 和 应用上述属性。

<div class="col-md-1 ">
   <div class="circle_menu">
       <a href="#" class="menu"></a>
    </div>
    <h1 class="_circle">Google Analytic</h1>
</div>