行中的元素要中心對齊

我想要的是這些圓圈要中心對齊，我嘗試使用一些顯示行內塊但沒有影響它和一些其他屬性，使中心對齊，但我失敗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

行中的元素要中心對齊

回答

相關問題