-1

This is my first post. Just as the title says, I am not able to center content inside of a div. Here is my code:

.coupon {
  border-style: dashed;
  border-color: black;
  min-height: 350px;
}

.fineprint {
  font-size: 11px;
  position: absolute;
  bottom: 25px;
  display: table-cell;
  vertical-align: bottom;
  text-align: center;
}

.couponcontent {
  position: absolute;
  top: 40%;
  bottom: 60%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.scissors {
  font-size: 48px;
  color: #ed1a24;
  position: absolute;
  top: 25px;
  display: table-cell;
  vertical-align: top;
  text-align: center;
}
<!-- Coupon Boxes -->
<div class="col-md-4 col-sm-6">
  <div class="feature boxed feature-s6">
    <div class="fbox-content center coupon">
      <span class="scissors"><i class="fa fa-scissors"></i></span>
      <div class="couponcontent">
        <h2>middle center</h2>
        <p>middle center</p>
      </div>
      <p class="fineprint">bottom center</p>
    </div>
  </div>
</div>
<!-- End Coupon box -->

Can someone help me center this content inside of the div? It is currently aligned left. Thanks!

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
user13459510
  • 1
  • Don't use position absolute, use flexbox to center things. (or grid if it's more complex layout) – cloned May 03 '20 at 10:13

2 Answers2

0

You need remove position: absolute and change display from table-cell to block.

.coupon {
  border-style: dashed;
  border-color: black;
  min-height: 350px;
}

.fineprint {
  font-size: 11px;

  bottom: 25px;
  display: block;
  vertical-align: bottom;
  text-align: center;
}

.couponcontent {
  
  display: block;
  vertical-align: middle;
  text-align: center;
}

.scissors {
  font-size: 48px;
  color: #ed1a24;

  top: 25px;
  display: block;
  vertical-align: top;
  text-align: center;
}
<!-- Coupon Boxes -->
<div class="col-md-4 col-sm-6">
  <div class="feature boxed feature-s6">
    <div class="fbox-content center coupon">
      <span class="scissors"><i class="fa fa-scissors"></i></span>
      <div class="couponcontent">
        <h2>middle center</h2>
        <p>middle center</p>
      </div>
      <p class="fineprint">bottom center</p>
    </div>
  </div>
</div>
<!-- End Coupon box -->
Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62
  • But then the vertical align no longer works. Please come up with a solution for that and I will mark the answer as correct. – user13459510 May 03 '20 at 10:31
-1

try to simplify your CSS as much as possible otherwise, there will be clashes and things like text-align:center won't work. https://www.w3schools.com/ is a great source when it comes to CSS.

.main{text-align:center}

.coupon {
  border-style: dashed;
  border-color: black;
  min-height: 350px;

}

.couponcontent {
  position: absolute;
  top: 40%;
  bottom: 60%;
}

.scissors {
  font-size: 48px;
  color: #ed1a24;
  position: absolute;
  top: 25px;
  display: table-cell;
  vertical-align: top;
  text-align: center;
}

  <div class='main'>

    <div class="coupon">
      <span class="scissors"><i class="fa fa-scissors"></i></span>
        <h2>middle center</h2>
        <p>middle center</p>

    </div>
  <p >bottom center</p>
  </div>
Ade N
  • 145
  • 1
  • 1
  • 12