如何在div中居中按钮？ [英] How to center a button within a div?

问题描述

我有一个div，宽度为100％。

我想在其中放置一个按钮，我该怎么办？

 < div style =width：100％; height：100％> 
< button type =button> hello< / button> 
< / div> 
  

解决方案

如果OP需要垂直和中心对齐，对于固定宽度和高度的按钮，请尝试以下

现场演示

$ b

p> 按钮{
height：20px;
width：100px;
margin：-20px -50px;
position：relative;
top：50％;
left：50％;
}


只需水平对齐即可使用

 按钮{
 margin：0 auto; 
} 
  

或

  div {
 text-align：center; 
} 
  

I have a div that's width is 100%.

I'd like to center a button within it, how might I do this?

<div style="width:100%; height:100%">
     <button type="button">hello</button>
</div>

解决方案

If the OP wants verticle and center alignment its quite easy for fixed width and height of the button, try the following

Live Demo

CSS

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

for just horizontal alignment use either

button{
    margin: 0 auto;
}

or

div{
    text-align:center;
}

这篇关于如何在div中居中按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！