0

So i'm having trouble entering the element with the middle class. So the container box-block-head-yellow had a width of 100% so that it can span any container, the class middle is using display inline-block so that the container wraps around it's content you can see the markup below.

<!-- Markup for container -->
<div class="box">
 <div class="box-block-head-yellow">
  <div class="box-title-block middle">
   <h1 class="box-title">Latest projects</h1>
  </div>
 </div>
</div>

So the issue i'm having is the middle container isn't centering in the middle. With the following styles on each element.

Parent element Parent element

Child element Child element

Result of element not being entered horizontally Result element

Tunds
  • 1,804
  • 2
  • 15
  • 30
  • Can you write out what the css is for the classes instead of a very blurry picture? Or at least just the main css components of the divs? – JoeL Mar 16 '16 at 18:58
  • a link to js-fiddle / codepen would help as well! – Julie Mar 16 '16 at 19:02

1 Answers1

2

Adding the following CSS to your box-block-head-yellow class can solve the center alignment issue.

.box-block-head-yellow {
  width: 100%;
  text-align: center;
}
.middle {
  display: inline-block;
}
Avijit Kumar
  • 538
  • 2
  • 9