我有一个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, button是#button:
#div {
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: center;
}
#button {}
然后像往常一样将按钮嵌套到div中。
最简单的方法是输入一个“div”,给它一个“margin:0 auto”,但如果你想让它居中,你需要给它一个宽度
Div{
Margin: 0 auto ;
Width: 100px ;
}
div { Text-align: center; } 按钮{ 宽度:50%; 保证金:1rem auto; } < div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >
这是我经常做的事。 我认为bootstrap也在“mx-auto”中使用这个。
由于提供了有限的细节,我将假设最简单的情况,并说你可以使用text-align: center:
http://jsfiddle.net/pMxty/
遇到这个,我想我也会留下我使用的解决方案,它利用line-height和text-align: center来做垂直和水平的居中:
点击这里使用JSFiddle