CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Umer
Umer

Reputation: 142

Elements inside the row to be center aligned

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

Upvotes: 0

Views: 1862

Answers (5)

Rach Glucio
Rach Glucio

Reputation: 90

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

Upvotes: 0

demogorgon
demogorgon

Reputation: 484

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

Upvotes: 0

Mehraj Khan
Mehraj Khan

Reputation: 977

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">
       <a href="#" class="menu"></a>
    </div>
    <h1 class="_circle">Google Analytic</h1>
</div>

Upvotes: 1

FAntony
FAntony

Reputation: 574

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. :)

Upvotes: 0

user8424881
user8424881

Reputation: 11

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.

Upvotes: 0

Related Questions