Css 行中要居中对齐的元素

我希望这些圆是中心对齐的，我尝试使用一些显示内联块，但对它没有影响，以及一些其他属性，使中心对齐，但我失败了 我已经找了一整天了：s

你能在这件事上帮我什么忙？ 非常感谢你的帮助

多谢各位

菜单{
宽度：70px；
高度：70像素；
边界半径：50px；
字体大小：20px；
颜色：绿色；
线高：100px；
背景#32C947；
溢出：隐藏；
列表样式类型：无；
左边距：自动；
右边距：自动；
显示：表格单元格；
垂直对齐：中间对齐；
}
.菜单：悬停{
颜色：#ccc；
文字装饰：无；
背景：#333
}

所有计划包括
你好
谷歌分析
谷歌分析
谷歌分析
谷歌分析
谷歌分析
谷歌分析
谷歌分析

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

您是否有

引导程序实际链接到您的代码？我只是把它放进一个盒子里
并链接了
Bootstrap3
，并且它的格式符合您的要求（除了文本太大）。我也从你的
菜单中取出了这些行：

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

编辑：

因此，圆不居中的原因是因为您使用的是
引导
的网格系统。栅格被分为12个不同的部分，其中8个部分填充了元素（12个部分没有被8平均分割）。这意味着在圆的右侧有4个空格未被使用

为了解决这个问题，我在您实现的所有元素之前添加了两个空的
div
标记：

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

有几种方法可以将该块居中对齐。但由于您使用引导，因此最好使用中心块类的内置display:block属性

设置要显示的元素：块和通过边距居中。可作为
混搭和上课

从这里读更多

你可以做任何一个

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


代码SNIPPPET

或


代码SNIPPPET

我们添加的
中心块
类覆盖了使用常规
容器
或
行
类放入的
显示：块

希望这有帮助。快乐编码：）
 对于圆的父
div
，您必须给出一些
宽度
属性并使用
此页边距和
页边距：0自动。我希望这能奏效

在您的代码父级中
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>


谷歌分析

菜单{
宽度：70px；
高度：70像素；
边界半径：50px；
字体大小：20px；
颜色：绿色；
线高：100px；
背景#32C947；
显示：块；
溢出：隐藏；
列表样式类型：无；
左边距：自动；
右边距：自动；
垂直对齐：中间对齐；
}
.中心{
文本对齐：居中；
}
.菜单：悬停{
颜色：#ccc；
文字装饰：无；
背景：#333
}

所有计划包括
你好
谷歌分析
谷歌分析
谷歌分析
谷歌分析
谷歌分析
谷歌分析
谷歌分析
你在使用什么
bootstrap
呢？我在使用3.3.7，基本上我想要的是它们应该出现在屏幕的中间，所有的圆圈都在中间我看到了，嗯，容器
类应该使用
margin:0 auto用于将元素居中，使其像您拥有的一样工作。我会继续调查的。@Umer我为你编辑了我的答案。这个解决方案应该可以解决您的网格系统问题。请注意，我没有对文本做任何修改，因为我认为这可能是您想要调整自己的内容。希望我能帮上忙！干杯我很感谢你的帮助，我试过了，但是我不能把圆圈放在屏幕中间。我在我的网站上试过这个部分，效果很好。你能发布一些截图吗[这是一个完整的代码]（）我在这些圆圈前后使用了两个空白列。这是可行的，但改变屏幕大小会造成问题，文本似乎没有沿着圆圈移动。通过应用2个空白列和以前的css文件，可以很好地解决此问题。：）你可能在所有物品上都用过？在您的情况下，偏移量应仅用于第一项（col-md-offset-2）。
<div class = "container">
     <div class="row center-block">
      CODE SNIPPPET
     </div>
     </div>

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