我有一个div,宽度为100%。
我想在其中居中一个按钮,我该怎么做呢?
< div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >
我有一个div,宽度为100%。
我想在其中居中一个按钮,我该怎么做呢?
< div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >
当前回答
假设div是#div, button是#button:
#div {
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: center;
}
#button {}
然后像往常一样将按钮嵌套到div中。
其他回答
var element = document.getElementById('btn1'); var elementwidth = element.clientWidth; var elementheight = element.clientHeight; Element.style.left = 'calc(50% - ('+elementwidth+'px / 2))'; Element.style.top = 'calc(50% - ('+elementheight+'px / 2))'; # btn1 { 位置:相对; } div { 身高:200 px; 宽度:200 px; 边框:1px纯黑色; } < html > <身体> < div > <input type = 'button' id = 'btn1'> < / div > 身体< / > < / html >
最简单的方法是输入一个“div”,给它一个“margin:0 auto”,但如果你想让它居中,你需要给它一个宽度
Div{
Margin: 0 auto ;
Width: 100px ;
}
遇到这个,我想我也会留下我使用的解决方案,它利用line-height和text-align: center来做垂直和水平的居中:
点击这里使用JSFiddle
假设div是#div, button是#button:
#div {
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: center;
}
#button {}
然后像往常一样将按钮嵌套到div中。
使用flexbox
.Center {
display: flex;
align-items: center;
justify-content: center;
}
然后将类添加到按钮中。
<button class="Center">Demo</button>