如何在div中将按钮居中?

福耶兹

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

我想将按钮居中放置,该怎么办?

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

洛克塔

更新的答案

由于我注意到这是一个积极的答案,所以进行了更新,但是Flexbox现在是正确的方法。

现场演示

垂直和水平对齐。

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

只是水平的(只要主伸缩轴是水平的,这是默认值)

#wrapper {
  display: flex;
  justify-content: center;
}

使用固定宽度且没有flexbox的原始答案

如果原始海报想要垂直和居中对齐,则对于固定按钮的宽度和高度非常容易,请尝试以下操作

现场演示

的CSS

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

仅用于水平对齐

button{
    margin: 0 auto;
}

要么

div{
    text-align:center;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章