Question

我想要的是这些圆圈居中对齐，我尝试使用一些显示内联块，但没有影响它和其他一些使中心对齐但我失败的属性picture of those circles 我一整天都在寻找这个：s

如何帮助我解决这个问题？非常感谢您的帮助。

谢谢

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

对于圈子的父div，您必须提供一些width属性并使用这和margin: 0 auto;。我希望这会奏效。

在您的代码父div .col-md-1 .so中，您必须再创建一个div和申请以上财产。

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

Answer 2

col-md-1类可能来自bootstrap，因此向左浮动。您可以添加col-md-offset类将菜单项推送到中心。

Answer 3

您是否Bootstrap实际链接到了您的代码？我把它放进CodePen 并链接Bootstrap3，并根据需要正确格式化（文本除外）。我也从你的.menu课程中取出了这些专栏：

vertical-align: middle;
list-style-type: none;
margin-left: auto;
margin-right: auto;

修改

因此，您的圈子未居中的原因是因为您正在使用Bootstrap的网格系统。网格被分成12个不同的部分，你有8个部分填充了元素（12个不是均匀地划分为8）。这意味着您的圈子右侧有4个空格未被使用。

要解决此问题，我在您实施的所有元素之前添加了两个空的div标记，如下所示：

<div class="col-md-1"></div>

这使得你的圆圈（左边）和后面（右边）有两个空的网格槽。以下是Updated CodePen供您查看。

注意：我添加了这种样式，让您通过CSS将文字居中：

div.row { text-align: center; }

Answer 4

有几种方法可以对齐该块。但是因为你使用Bootstrap，所以最好使用中心块类的in build display：block属性。

设置要显示的元素：通过边距阻止和居中。可用作 mixin和class。

从此处阅读更多内容Bootstrap Documentation About centering a Class

你可以做任何一个

getAllPendingJobs ()

OR

 <div class = "container center-block">
 <div class="row ">
  CODE SNIPPPET
 </div>
 </div>

我们添加的<div class = "container"> <div class="row center-block"> CODE SNIPPPET </div> </div>类会使用常规center-block或display:block类

覆盖放入的container

希望这有帮助。快乐的编码。：）

Answer 5

＆＃13;

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

＆＃13;

 

<div class = "container">
  <div class="row justify-content-center">
        <div class="col-md-12 center">
          <h1 class = "_font ">All Plans Include</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Hello</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>

        <div class="col-md-1 center">
          <a href="#" class="menu"></a>
          <h1 class="_circle">Google Analytic</h1>
        </div>   
      </div>
    </div>

＆＃13;

行内的元素要居中对齐

5 个答案: