如何使相对定位的按钮居中

Question

我有一个相对于它的父按钮定位的按钮。问题是，当父宽度改变时，我的按钮不再位于中心，我不能使用 margin: 0 auto

我将展示一些图片来证明我的意思：

看看这顿饭和汉堡是如何不居中的，顺便说一句，它们在 400 像素的屏幕宽度上居中

.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;
}

img {
  width: 12em;
  height: 10em;
}

.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="https://www.freepngimg.com/thumb/burger/4-2-burger-png-file.png" 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>

我试过w3school的解决方案没用，我也试过其他堆栈溢出问题也没用

Answer 1

.middle-part 你能去掉这里的 position:absolute 特征试试吗？

编辑..

还有 .meal-burger-btn -> 左侧：%15 删除功能

Answer 2

我建议避免绝对定位，在中间部分使用负的上边距。

.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>

Answer 3

好吧，如果你必须使用绝对定位，你需要给它宽度 100%，它会使用它父级所拥有的所有 space，现在绝对定位 div具有自动宽度，宽度只会根据其中的内容扩展。无需将父级本身定位在 center 中，而是将其中的内容集中起来。

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

请记住，将中心添加到 div 并不是中心本身，而是将影响应用于其中的内容或子项。此外，我建议查看 flex-box ，当您想轻松地执行遵循一致模式的 CSS 时，它非常有帮助。

也不要使用 margins/top/left/padding 来居中，如果分辨率改变它总是会爆炸，除非你对它们使用自动。

如何使相对定位的按钮居中

How to center a button that is positioned relatively

html

css

web

frontend

web-frontend