如何使相对定位的按钮居中
How to center a button that is positioned relatively
我有一个相对于它的父按钮定位的按钮。问题是,当父宽度改变时,我的按钮不再位于中心,我不能使用 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的解决方案没用,我也试过其他堆栈溢出问题也没用
.middle-part 你能去掉这里的 position:absolute 特征试试吗?
编辑..
还有
.meal-burger-btn -> 左侧:%15 删除功能
我建议避免绝对定位,在中间部分使用负的上边距。
.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>
好吧,如果你必须使用绝对定位,你需要给它宽度 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 来居中,如果分辨率改变它总是会爆炸,除非你对它们使用自动。
我有一个相对于它的父按钮定位的按钮。问题是,当父宽度改变时,我的按钮不再位于中心,我不能使用 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的解决方案没用,我也试过其他堆栈溢出问题也没用
.middle-part 你能去掉这里的 position:absolute 特征试试吗?
编辑..
还有 .meal-burger-btn -> 左侧:%15 删除功能
我建议避免绝对定位,在中间部分使用负的上边距。
.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>
好吧,如果你必须使用绝对定位,你需要给它宽度 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 来居中,如果分辨率改变它总是会爆炸,除非你对它们使用自动。