你如何使块元素居中？

Question

我有一个网站，其中包含一些 <button> 元素，我希望这些元素位于页面的中央：（它们显示为内联块）

见下方截图

编辑：这是问题的代码：

HTML代码：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="CSS/index.css">
    </head>
    <body>
        <!-- Start Header -->
        <div class="header">
            <nav>
                <a href="index.html"><button type="button">Home</button></a>
                <!--First Case (unnamed)-->
                <button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
                <!--Second Case (unnamed)-->
                <button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
                <a href="help.html"><button type="button">Help</button></a>
            </nav>
        </div>
        <!-- End Header -->
        <h1>Coming Soon!</h1>
    </body>
</html>

CSS代码：

h1
{
    text-decoration: underline;
}
/* Common Header */
body
{
    background-color: #d5d5d5;
}
.header button
{
    background-color:#8C481B;
    text-align:center;
}
button span .comingsoon
{
    color:#dddddd;
}
button
{
    display:inline-block;
}

Answer 1

将text-align: center添加到nav

h1 {
  text-decoration: underline;
}
/* Common Header */

body {
  background-color: #d5d5d5;
}
.header button {
  background-color: #8C481B;
  text-align: center;
}
button span .comingsoon {
  color: #dddddd;
}
button {
  display: inline-block;
}
nav {
  text-align: center;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>

<body>
  <!-- Start Header -->
  <div class="header">
    <nav>
      <a href="index.html">
        <button type="button">Home</button>
      </a>
      <!--First Case (unnamed)-->
      <button type="button" disabled><span class="comingsoon">Coming soon!</span>
      </button>
      <!--Second Case (unnamed)-->
      <button type="button" disabled><span class="comingsoon">Coming soon!</span>
      </button>
      <a href="help.html">
        <button type="button">Help</button>
      </a>
    </nav>
  </div>
  <!-- End Header -->
  <h1>Coming Soon!</h1>
</body>

</html>

Answer 2

使用此 CSS：因为您的元素被包裹在 header class 中，所以使用

.header nav{ 
  margin-right:auto; 
  margin-left:auto; 
  max-width:600px;
}

您可以根据需要自定义max-width。

演示：

h1 {
  text-decoration: underline;
}
/* Common Header */

body {
  background-color: #d5d5d5;
}
.header button {
  background-color: #8C481B;
  text-align: center;
}
button span .comingsoon {
  color: #dddddd;
}
button {
  display: inline-block;
}
.header nav {
  margin-right: auto;
  margin-left: auto;
  max-width: 600px;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>

<body>
  <!-- Start Header -->
  <div class="header">
    <nav>
      <a href="index.html">
        <button type="button">Home</button>
      </a>
      <!--First Case (unnamed)-->
      <button type="button" disabled><span class="comingsoon">Coming soon!</span>
      </button>
      <!--Second Case (unnamed)-->
      <button type="button" disabled><span class="comingsoon">Coming soon!</span>
      </button>
      <a href="help.html">
        <button type="button">Help</button>
      </a>
    </nav>
  </div>
  <!-- End Header -->
  <h1>Coming Soon!</h1>
</body>

</html>

Answer 3

你需要把按钮放在 div 里面然后给 div margin:0px auto 这将使 div 居中对齐所以按钮是它的子元素他们会也居中对齐 DEMO

#divBtn {
  width: 300px;
  margin: 0px auto;
  background: whitesmoke;
}

<div id="divBtn">
  <button>Submit1</button>
  <button>Submit1</button>
  <button>Submit1</button>
  <button>Submit1</button>
</div>

Answer 4

您可以在 class header 或导航上使用 css 属性 "text-align: center;" 喜欢：

.header {
    text-align: center;
}

或

nav {
    text-align: center;
}

以上方案任选其一。

为了您的帮助，我也分享了一个 fiddle link。请看一看。如果您发现任何不正确的地方，请告诉我。 http://fiddle.jshell.net/8hkcnqy3/

你如何使块元素居中？

How can you center block elements?

html

css

centering