How to center a button that is positioned relatively-CodePudding

I have a button that is positioned relatively to it's parent. The problem is that when that parent width changes my buttons are no longer in the center and i can't use margin: 0 auto

I'll show some images to demonstrate what i mean:

see how the meal and burger are not centered, btw they are centers on a screen width of 400px

.card-container {
  width: 45%;
  margin-bottom: 1rem;
  background: #fff;
  border: 1px solid #707070;
  border-radius: 20px;
}

.card-container * {
  margin: 0;
  padding: 0 8px;
}


/*
-----
top-part
-----
*/

.top-part {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  padding: 2rem 0;
  border-bottom: 1px solid #808080;
}


/*
----
meal && burger
----
*/

.middle-part {
  text-align: center;
  position: absolute;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: -webkit-box;
}

.meal-burger-btn {
  position: relative;
  background: #fff;
  border: 1px solid #808080;
  border-radius: 50%;
  width: 3.5rem;
  padding: 1.3em 0;
  top: -28px;
  left: 15%;
  margin: auto;
}

<div class="card-container">
  <div class="top-part">
    <p>crazy burger</p>
  </div>

  <div class="middle-part">
    <button class="meal-burger-btn">meal</button>
    <button class="meal-burger-btn">burger</button>
  </div>

  <div class="bottom-part">
    <p class="price price-active">2.0 bd</p>
    <p class="price">1.7 bd</p>

    <div class="card-image-container">
      <img src="images/IMG_0406_LI.jpg" alt="">
    </div>

    <p class="ingredients">ingredients:</p>
    <p class="ingredients-2">Beef patty - Toasted burger buns - Bacon - Onion rings - Cheddar cheese - Crazy Sauce</p>
  </div>
</div>

I tried w3shcool solution and it didn't work, I've also tried other stack overflow question also didn't work

CodePudding user response：

.middle-part can you remove the position:absolute feature here and try?

Edit..

And .meal-burger-btn -> left: remove feature

CodePudding user response：

I'd recommend to avoid absolute positioning, and use a negative top-margin on the middle part.

.card-container {
  width: 45%;
  margin-bottom: 1rem;
  background: #fff;
  border: 1px solid #707070;
  border-radius: 20px;
}

.card-container * {
  margin: 0;
  padding: 0 8px;
}


/*
-----
top-part
-----
*/

.top-part {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  padding: 2rem 0;
  border-bottom: 1px solid #808080;
}


/*
----
meal && burger
----
*/

.middle-part {
  text-align: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: -webkit-box;
  margin-top: -1.75rem;
  margin-left: auto;
  margin-right: auto;
}

.meal-burger-btn {
  background: #fff;
  border: 1px solid #808080;
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  line-height: 3.2rem
}

<div class="card-container">
  <div class="top-part">
    <p>crazy burger</p>
  </div>

  <div class="middle-part">
    <button class="meal-burger-btn">meal</button>
    <button class="meal-burger-btn">burger</button>
  </div>

  <div class="bottom-part">
    <p class="price price-active">2.0 bd</p>
    <p class="price">1.7 bd</p>

    <div class="card-image-container">
      <img src="images/IMG_0406_LI.jpg" alt="">
    </div>

    <p class="ingredients">ingredients:</p>
    <p class="ingredients-2">Beef patty - Toasted burger buns - Bacon - Onion rings - Cheddar cheese - Crazy Sauce</p>
  </div>
</div>

CodePudding user response：

Well if you must use position absolute , you need to give it width 100% and it will use all the space it has according to it parent, right now the the absolutely positioned div has width on auto and the width will only expand according to the content it has in it . No need to position the parent itself in center , but rather centralize the contents in it.

middle-part{
  text-align: center;
  position: absolute;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: -webkit-box;
  width:100%;
  width:-webkit-fill-available;
}

Do remember , adding center to a div just not center itself , but the affect is applied to the contents or children in it. Also , i would suggest look into flex-box , it is very help-full when you want to easily do CSS that follows the a consistent pattern.

Also don't use margins/top/left/padding for centering stuff , it will always blow up if the resolution changes , not unless if you use Auto with them.