0

Please have a look at this Image. enter image description here

Here I was use the Bootstrap for aligning the divs. And created only one div. The Contents are added in this div dynamically from the admin side. then it will loop the div. That's Working fine.

But here you can see only 6 Contents are available. So 2 Divs are aligned in the left. I need these div should align in the middle of the Page. If the Contents are 7 or 5 the Second row Contents should be in the Middle. How to align these Divs Middle. Please Help me to Solve this Problem.

Here Is My Code..

<div class="col-sm-6 col-md-3"> <div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="100ms"> <img src="{{ 'assets/img/icon-services.png' |theme }} "> <h4>{{ service['name'] }}</h4> <p>{{ str_limit(service['description'], 100) }}</p> <a href="{{ url('services') }}/{{ service['slug'] }}" class="read-more">Read More</a> </div> </div>

Thank you in Advance.

Melbin Mathai
  • 487
  • 8
  • 26

2 Answers2

1

Add display: inline to child div and text-align: center to the parent div. Don't use col-md of bootstrap because it have float: left propertive

.parent {
  text-align: center;
}

.child {
  display: inline-block;
  width: 24%;
  border: solid 1px #123;
  height: 50px;
  margin: 0 auto !important;
}
<div class="parent" id="parent">
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>
Duannx
  • 7,501
  • 1
  • 26
  • 59
0

You can use bootstrap to set an offset for each div dynamically depending on your div's desired position or set the margin of the divs to auto. See this post for a detailed explanation.

rohit-biswas
  • 815
  • 1
  • 11
  • 23