我有一个div,宽度为100%。
我想在其中居中一个按钮,我该怎么做呢?
< div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >
我有一个div,宽度为100%。
我想在其中居中一个按钮,我该怎么做呢?
< div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >
当前回答
想起来:
button {
width: 100px; // whatever your button's width
margin: 0 auto; // auto left/right margins
display: block;
}
更新:如果OP正在寻找水平和垂直中心,这个答案将做一个固定的宽度/高度元素。
其他回答
适用于大多数情况的超级简单的答案是将margin设置为0 auto并将显示设置为block。你可以看到我在CodePen的演示中如何居中我的按钮
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 >
要将<button type = "button">在<div>中垂直和水平居中,宽度是动态计算的,就像在你的例子中一样,下面是要做的:
设置文本对齐:居中;到换行<div>:当你调整<div>(或者窗口)的大小时,这将使按钮居中。 对于垂直对齐,你需要设置margin: valuepx;对于按钮。下面是计算valuepx的规则: valuepx = (wrappingDIVheight - buttonHeight)/2
这是一个JS Bin的演示。
由于提供了有限的细节,我将假设最简单的情况,并说你可以使用text-align: center:
http://jsfiddle.net/pMxty/
想起来:
button {
width: 100px; // whatever your button's width
margin: 0 auto; // auto left/right margins
display: block;
}
更新:如果OP正在寻找水平和垂直中心,这个答案将做一个固定的宽度/高度元素。