我有一个div,宽度为100%。
我想在其中居中一个按钮,我该怎么做呢?
< div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >
我有一个div,宽度为100%。
我想在其中居中一个按钮,我该怎么做呢?
< div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >
当前回答
响应式CSS选项,将按钮垂直和水平居中,而不考虑父元素大小(使用数据属性挂钩的清晰度和分离问题):
HTML
<div data-element="card">
<div data-container="button"><button>CTA...</button></div>
</div>
CSS
[data-container="button"] {
position: absolute;
top: 50%;
text-align: center;
width: 100%;
}
小提琴:https://jsfiddle.net/crrollyson/zebo1z8f/
其他回答
在div中居中按钮的响应方式:
<div
style="display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;">
<button type="button" style="height: 10%; width: 20%;">hello</button>
</div>
更新后的答案
更新是因为我注意到这是一个积极的答案,但现在Flexbox将是正确的方法。
现场演示
垂直和水平对齐。
#wrapper {
display: flex;
align-items: center;
justify-content: center;
}
只是水平(只要主伸缩轴是水平的,这是默认的)
#wrapper {
display: flex;
justify-content: center;
}
原来的答案使用固定宽度和不灵活
如果原来的海报想要垂直和中心对齐,它很容易固定宽度和高度的按钮,尝试以下
现场演示
CSS
button{
height:20px;
width:100px;
margin: -20px -50px;
position:relative;
top:50%;
left:50%;
}
对于水平对齐使用任何一种
button{
margin: 0 auto;
}
or
div{
text-align:center;
}
由于提供了有限的细节,我将假设最简单的情况,并说你可以使用text-align: center:
http://jsfiddle.net/pMxty/
适用于大多数情况的超级简单的答案是将margin设置为0 auto并将显示设置为block。你可以看到我在CodePen的演示中如何居中我的按钮
div { Text-align: center; } 按钮{ 宽度:50%; 保证金:1rem auto; } < div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >
这是我经常做的事。 我认为bootstrap也在“mx-auto”中使用这个。