行中的元素要中心对齐

我想要的是这些圆圈要中心对齐，我尝试使用一些显示行内块但没有影响它和一些其他属性，使中心对齐，但我失败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>

来源

2017-08-06 Umer

？ –

我正在使用3.3.7 – Umer

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


 

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

bootstrap`你使用的是什么`

来源

2017-08-07 14:56:34

的COL-MD-1级可能是从引导和浮动为此向左侧。您可以添加col-md-offset类以将菜单项推送到中心。

来源

2017-08-06 14:28:40 user8424881

我试过这个，但是[发生这种情况]（https://ibb.co/hXo1ma）这个出现 – Umer

你可能已经在所有物品上使用了它？在您的情况下，偏移量应仅用于第一项（col-md-offset-2）。 – user8424881

您是否已将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; 
}

来源

2017-08-06 14:48:22

基本上我想要的是，他们应该出现在屏幕中间，所有的圈子在中间 – Umer

我看到，嗯，'.container'类应该使用'margin：0 auto;'这意味着中心元素，所以它应该像你拥有它一样工作。我会继续研究它。 –

@Umer我为你编辑了我的答案。这个解决方案应该可以解决你的网格系统问题。请注意我没有对文本做任何事情，因为我认为这可能是你想调整自己的东西。希望我有帮助！干杯! –

有几种方法，以中心对齐该块。但是，由于您使用Bootstrap，因此最好使用中心块类的in build display：block属性。

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

阅读更多从这里Bootstrap Documentation About centering a Class

你可以做任何我们添加覆盖了display:block把这个

<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类的任何一个通过使用th e常规container或row类

希望这对我有帮助。快乐编码。 :)

来源

2017-08-06 15:09:06

以及我感谢你的帮助，我试过了，但即时通讯不能带来在屏幕中间的圈子 – Umer

我试过在我的网站的那部分，它工作正常。你可以张贴一些截图。 :) –

[这是一个完整的代码]（https://ibb.co/hybqCF https://ibb.co/iUQ6ma https://ibb.co/k0YgKv） – Umer

对于一个圆的父母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>

来源

2017-08-06 15:15:57

行中的元素要中心对齐

回答

相关问题