我有一个div,宽度为100%。
我想在其中居中一个按钮,我该怎么做呢?
< div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >
我有一个div,宽度为100%。
我想在其中居中一个按钮,我该怎么做呢?
< div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >
当前回答
你应该把它简单化:
首先你有你的文本或按钮的初始位置:
<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2> Simple Text </h2>
<div>
<button> Simple Button </button>
</div>
</div>
通过将此css代码行添加到h2标记或包含按钮标记的div标记
样式:" text-align:center; "
结果代码将是:
<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->
<div style="text-align:center"> <!-- <<--- here the changes -->
<button> Simple Button </button>
</div>
</div>
其他回答
遇到这个,我想我也会留下我使用的解决方案,它利用line-height和text-align: center来做垂直和水平的居中:
点击这里使用JSFiddle
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 >
更新后的答案
更新是因为我注意到这是一个积极的答案,但现在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;
}
你可以这样做:
< 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内的所有内容,另一个将中心对齐按钮。
要将<button type = "button">在<div>中垂直和水平居中,宽度是动态计算的,就像在你的例子中一样,下面是要做的:
设置文本对齐:居中;到换行<div>:当你调整<div>(或者窗口)的大小时,这将使按钮居中。 对于垂直对齐,你需要设置margin: valuepx;对于按钮。下面是计算valuepx的规则: valuepx = (wrappingDIVheight - buttonHeight)/2
这是一个JS Bin的演示。