CODEWITHSUNDEEP
htmlcssflexboxposition
Logan Phillips
Logan Phillips

Reputation: 710

Horizontally centering a div in a flex item

I have 3 flex items (each item is a div). Each flex item contains an image, 2 paragraph tags, and a div (For a button). I am trying to horizontally center each button in each flex item.

I have tried setting justify-content:center; in the flex container but this did not work. (I don't think this is what I want anyway because I only want the div to be horizontally centered) I also tried setting margin: 0 auto; to the button. Neither of these seem to work. Currently, each flex item has a width of 33%, so I set the inner div to have position: absolute; and left: 16.5%; (Half of the containers width). But this doesn't look right. This is the closest I got. Any ideas on how to make this look better?

HTML:

<section class="overview-section">
  <h2>Overview</h2>

  <div class="row">
    <div class="box">
      <img src="https://images.unsplash.com/photo-1550129460-d47c2040f9df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=282&q=80">
      <p class="under-text">TITLE GOES HERE</p>
      <p class="txt">adsf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf </p>
      <div class="btn">Learn more</div>
    </div>
    <div class="box">
      <img src="https://images.unsplash.com/photo-1550129460-d47c2040f9df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=282&q=80">
      <p class="under-text">TITLE GOES HERE</p>
      <p class="txt">adsf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
      </p>
      <div class="btn">Learn More</div>
    </div>
    <div class="box">
      <img src="https://images.unsplash.com/photo-1550129460-d47c2040f9df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=282&q=80">
      <p class="under-text">TITLE GOES HERE</p>
      <p class="txt">adsf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
      </p>
      <div class="btn">Learn more</div>
    </div>
  </div>

</section>

CSS:

@import url("https://fonts.googleapis.com/css?family=Oswald:300,400,500");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
@import url("https://fonts.googleapis.com/css?family=Staatliches");

.row {
  display: flex;
  margin: 0 -50px;
}

.box {
  position: relative; /* button will be positioned relative to this container */
  border: 2px solid blue;
  width: 33%;
  height: 450px;
  margin: 0 50px;
}

.box img {
  width: 100%;
  height: 250px;
}

.under-text {
  font-family: "Staatliches", cursive;
  color: red;
  text-align: center;
}

.txt {
  padding-left: 20px;
}

.btn {
  position: absolute;
  left: 16.5%;
  bottom: 0;

  background-color: #4caf50;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  background-color: white;
  color: black;
  border: 2px solid #4caf50;
}

Codepen: https://codepen.io/anon/pen/rPqgVm

Expected result: Each div in the flex items should be horizontally centered.

Upvotes: 1

Views: 1022

Answers (4)

gikall
gikall

Reputation: 607

Remove from

.btn {
  position: absolute;
  left: 16.5%;
  bottom: 0;
}

And add in

.box {
display: flex;
flex-direction: column;
align-items: center;
}

Upvotes: 1

SiriusGD
SiriusGD

Reputation: 95

I use Grid but maybe this suggestion will help. Put the button in a container of it's own and then center it within that container.

<div class = 'btncontainer'>
    <div class="btn">Learn more</div>
</div>

Upvotes: 0

Barkha
Barkha

Reputation: 722

You can also wrap the btn div in another div and add 

 display: flex;
 justify-content: center;

and remove absolute and left from existing btn div.

modified codePen: https://codepen.io/anon/pen/ErOYPw

Upvotes: 0

Bryce Howitson
Bryce Howitson

Reputation: 7690

I assume you're talking about .btn correct? If so you have two options.

Remove the absolute position and give it auto margins. ("auto" means as much as you can get equally)

.btn {
 // margin top & bottom - margin left& right
 margin: 10px auto;
}

Or if you keep the absolute position you need to set the left to 50% and then pull the left corner of the div BACK 50% of it's width

.btn {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
}

Upvotes: 0

Related Questions