我有一个 div,里面有一个按钮:
我让按钮位置为absolute
,及其样式代码:
.buy-btn {
text-align: center;
position: absolute;
bottom: 10px;
}
我怎样才能将其对齐到中心?我尝试添加margin: 0 auto;
,但它不起作用。
如果我理解你的问题,那么它将按如下方式工作。
您可以通过三种方式做到这一点。
No1 - 使用位置。将宽度 100% 应用于按钮父级 div 并应用按钮样式,如下所示。
.buy-btn{
display: inline-block; /* Display inline block */
text-align: center; /* For button text center */
position: absolute; /* Position absolute */
left: 50%; /* Move 50% from left */
bottom: 10px; /* Move 10px from bottom */
transform: translateX(-50%); /* Move button Center position */
}
No2 - 使用父 div,将宽度 100% 应用于父 div 并从按钮中删除绝对位置。
.parentDiv {
width: 100%; /* for full width */
text-align: center; /* for child element center */
}
.buy-btn{
display: inline-block; /* Display inline block */
text-align: center; /* For button text center */
}
No3 - 使用边距,将宽度 100% 应用于您的父 div 并从按钮中删除绝对位置。
.parentDiv {
width: 100%; /* for full width */
}
.buy-btn{
display: inline-block; /* Display inline block */
text-align: center; /* For button text center */
margin: 0 auto; /* For button center */
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)