首页 > web前端 > css教程 > 如何将按钮置于 Div 中?

如何将按钮置于 Div 中?

Mary-Kate Olsen
发布: 2024-12-25 20:05:09
原创
125 人浏览过

How Can I Center a Button Inside a Div?

将按钮在 Div 中居中

在 Web 开发中,通常希望将按钮在包含的 div 中居中。让我们探索应对这一挑战的两种解决方案:

使用 Flexbox

Flexbox 提供了一种沿两个轴对齐元素的优雅解决方案。要使按钮在 div 内水平和垂直居中:

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
登录后复制

如果仅需要水平居中,则可以使用 justify-content 属性:

#wrapper {
  display: flex;
  justify-content: center;
}
登录后复制

Margin-基于方法

没有 Flexbox,可以使用以下方法将按钮居中margins:

button {
  margin: -20px -50px; /* Offset to center */
  position: relative;
  top: 50%;
  left: 50%;
}
登录后复制

仅对于水平居中,可以使用以下两种方法之一:

  • margin: 0 auto;在按钮上
  • 文本对齐:居中;在包含 div

以上是如何将按钮置于 Div 中?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板