Elements inside the row to be center aligned - css

Question

I want is that these circles to be center aligned , I tried using some display inline block but no affect on it and some other properties that make center align but i failed picture of those circles
I am searching for this already the whole day :s
How can help me on this one?
Your help would be much appreciated.
Thank you
.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 ">
<h1 class="_circle">Hello</h1>
</div>
<div class="col-md-1 ">
<h1 class="_circle">Google Analytic</h1>
</div>
<div class="col-md-1 ">
<h1 class="_circle">Google Analytic</h1>
</div>
<div class="col-md-1 ">
<h1 class="_circle">Google Analytic</h1>
</div>
<div class="col-md-1 ">
<h1 class="_circle">Google Analytic</h1>
</div>
<div class="col-md-1 ">
<h1 class="_circle">Google Analytic</h1>
</div>
<div class="col-md-1 ">
<h1 class="_circle">Google Analytic</h1>
</div>
<div class="col-md-1 ">
<h1 class="_circle">Google Analytic</h1>
</div>
</div>
</div>

Answer 1

To the parent div of a circle you have to give some width property and use
this and margin: 0 auto;. I hope this will works.
In your code parent div .col-md-1 .so you have to create one more div and
apply above property.
<div class="col-md-1 ">
<div class="circle_menu">
</div>
<h1 class="_circle">Google Analytic</h1>
</div>

Answer 2

.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">
<h1 class="_circle">Hello</h1>
</div>
<div class="col-md-1 center">
<h1 class="_circle">Google Analytic</h1>
</div>
<div class="col-md-1 center">
<h1 class="_circle">Google Analytic</h1>
</div>
<div class="col-md-1 center">
<h1 class="_circle">Google Analytic</h1>
</div>
<div class="col-md-1 center">
<h1 class="_circle">Google Analytic</h1>
</div>
<div class="col-md-1 center">
<h1 class="_circle">Google Analytic</h1>
</div>
<div class="col-md-1 center">
<h1 class="_circle">Google Analytic</h1>
</div>
<div class="col-md-1 center">
<h1 class="_circle">Google Analytic</h1>
</div>
</div>
</div>

Answer 3

The col-md-1 class is probably from bootstrap and therefor floating to the left. You could add the col-md-offset class to push the menu items to the center.

Answer 4

There are several ways to center align that block. But since you use the Bootstrap it will be best to use the in build display:block property of a center-block class.
Set an element to display: block and center via margin. Available as a
mixin and class.
Read More from Here Bootstrap Documentation About centering a Class
You can do either any one of this
<div class = "container center-block">
<div class="row ">
CODE SNIPPPET
</div>
</div>
OR
<div class = "container">
<div class="row center-block">
CODE SNIPPPET
</div>
</div>
The center-block class which we add overrides the display:block put in by using the regular container or row class
Hope This helped. Happy Coding. :)

Answer 5

Do you have Bootstrap actually linked to your code? I just put it into a CodePen
and linked Bootstrap3 and it formatted correctly as you want (except the text is to big). I took out these lines from your .menu class as well:
vertical-align: middle;
list-style-type: none;
margin-left: auto;
margin-right: auto;
Edit:
So the reason why your circles are not centered is because you are using Bootstrap's grid system. The grid is sliced into 12 different sections and you have 8 of the sections filled with elements (and 12 isn't divided by 8 evenly). That means that there are 4 spaces not being used to the right of your circles.
To fix this, I added two empty div tags before all of the elements you have implemented like so:
<div class="col-md-1"></div>
This makes it so that there are two empty grid slots before your circles (to the left) and two after (to the right). Here is the Updated CodePen for you to look at.
Note: I added this style for you to center your text through CSS:
div.row {
text-align: center;
}