当前位置: 首页 > 知识库问答 >
问题:

html中按钮居中

晁砚
2023-03-14

我正试着在我的博客帖子里放一个按钮。 我已经设计了按钮,但是我不能正确地将它放在页面的中心。

我怎么把这个按钮居中?

<html>
  <head>
    <style>
      .button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h2>Buttons</h2>

     
    <a class="button" href="#">Link Button</a>
    <button class="button">Button</button>
  </body>
</html>


    

共有1个答案

上官联
2023-03-14

在父元素中使用margin:0auto;

null

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

body {
  text-align: center;
}
<h2>Buttons</h2>


<a class="button" href="#">Link Button</a>
<button class="button">Button</button>
 类似资料:
  • 在Java代码中,我无法在VBox中居中按钮!我使用场景生成器创建了一个SplitPane,左侧的AnchorPane有一个位于VBox中心的按钮。我想用Java代码在右AnchorPane而不是FXML中重新创建一个VBox中的按钮。但右侧按钮没有居中,尽管我使用

  • 问题内容: 我有一个宽度为100%的div。 我想将按钮居中放置,该怎么办? 问题答案: 更新的答案 由于我注意到这是一个积极的答案,所以进行了更新,但是Flexbox现在是正确的方法。 现场演示 垂直和水平对齐。 只是水平的(只要主伸缩轴是水平的,这是默认值) 使用固定宽度且没有flexbox的原始答案 如果原始海报想要垂直和居中对齐,则对于固定按钮的宽度和高度非常容易,请尝试以下操作 CSS

  • 我不知道如何在材质UI中居中放置按钮。这是我的代码: 我怎样才能使我的按钮居中?

  • 我试图得到分页从材料UI,但我想中心的箭头和页数的按钮。 我试图通过创建

  • 问题内容: 我正在Twitter Bootstrap中构建表单,但是将按钮居中于表单输入下方时出现问题。我已经尝试过将类应用于按钮,但这没有用。我该如何解决? 这是我的代码。 问题答案: 用“文本中心”类在div中包装Button。 只需更改此: 对此: 编辑 作为 BootstrapV4 ,滴入#19102赞成

  • 不知道如何将此按钮居中。在BS3中,我只使用中心块,但在BS4中,这不是一个选项。有什么建议吗?

  • 下面给出的是我使用材料ui编码的代码。我对那个地区还是新手。我需要把我的按钮放在中间。但它到了拐角处。我的代码有问题吗?

  • 这只是一个简单的问题,但我不知道它叫什么: 在图片中你可以看到2按钮:截图 我希望用户只需键入电子邮件和密码,然后按return接受即可。是否有机会进行设置? 我知道C#中有一个选项,但我忘记了它的名称。(标准按钮?) 我无法发布图片。。(你需要至少10个声望才能发布图片…) so:有2个输入文本和2个按钮(登录表单/注册)电子邮件-密码-登录Btn和/或注册Btn。用户键入他的电子邮件和密码。之