Question

我只是在做一页或类似的东西。而且我想将按钮居中，但这不起作用。

我尝试使用不同的方法将其居中，但这没有用。看代码。它有，但没有将它居中放置在整个页面上，只是像..我不知道。照片：http://prntscr.com/mfrkam

<div class="form-group">
   <div class="row">
        <center> 
<input type="submit" class="btn btn-outline-success" name="submit" value="Add Website">
                              &nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" class="btn btn-outline-danger" name="cancel" value="Cancel">
</center>

</div>
</div>

Answer 1

如Mozilla开发网站指出https://developer.mozilla.org/it/docs/Web/HTML/Element/center

不再推荐此功能。尽管一些浏览器可能仍然支持它，它可能已经从相关网页标准去除，可能是被丢弃的过程中，或只可保持兼容性的目的。避免使用它，并尽可能更新现有代码；看到兼容表在这个页面的底部来指导你的决定。请注意，这个功能可能会停止工作在任何时候。

可能是它从.btn继承了规则，或者您的浏览器不再支持此标记。您可以尝试将text-align: center或margin: auto应用于父容器。

Answer 2

尝试一下：

下面的css的第一行将它们在div中居中，其类名为row，第二行将使它们具有相同的宽度。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .row{text-align:center;}//this will center the buttons
      input[type='submit'],input[type="reset"]{width:150px;}
    </style>
  </head>
  <body>
    <div class="form-group">
      <div class="row">
        <input type="submit" name="submit" value="Add Website"><br /><input type="reset" name="cancel" value="Cancel">
      </div>
    </div>
  </body>
</html>

这是您的对话框的外观：

您可以在这里玩这种事情：https://www.w3schools.com/cssref/pr_text_text-align.asp

Answer 3

在<center> HTML5引入当标签被弃用。要使包括按钮的文本内容居中，请将内容包装在div中，为该div提供一个类或唯一的ID，然后使用CSS定位div。适用的CSS规则text-align: center;，以该div。

尝试一下：

<!-- style tags allow CSS to be written in an HTML file -->
<style>
  /* centers all the text in the div with a class of row */
  .row {
      text-align: center;
  }
</style>
<div class="form-group">
  <div class="row"> 
    <input type="submit" class="btn btn-outline-success" name="submit" value="Add Website">
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="reset" class="btn btn-outline-danger" name="cancel" value="Cancel">
  </div>
</div>

注意，为所有CSS包括一个单独的文件是一种公认的最常见的做法。它在这里与样式标签一起使用，但这不是标准做法。希望这会有所帮助！

Answer 4

在CSS中尝试一下：

.row {
  text-align: center;
}

如何将按钮居中，<center> </center>不起作用

4 个答案: