我有一个div,宽度为100%。

我想在其中居中一个按钮,我该怎么做呢?

< div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >


当前回答

你可以这样做:

< span style=" font - family:宋体;边框:1px实心"> <input type="button" value="button"> < / div >

或者你可以这样做:

< span style=" font - family:宋体 <input type="button" value="button" style="display: block;保证金:0自动;" > < / div >

第一个将中心对齐div内的所有内容,另一个将中心对齐按钮。

其他回答

假设div是#div, button是#button:

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

然后像往常一样将按钮嵌套到div中。

适用于大多数情况的超级简单的答案是将margin设置为0 auto并将显示设置为block。你可以看到我在CodePen的演示中如何居中我的按钮

在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>

最简单的方法是输入一个“div”,给它一个“margin:0 auto”,但如果你想让它居中,你需要给它一个宽度

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

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 >