Question

我有一个网站，其中包含一些<button>元素，我希望在页面上居中:(它们显示为内联块）

见下面的截图

编辑：以下是问题的代码：

HTML code：

<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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

你需要将按钮放在div中然后给div div：0px auto会使div居中对齐所以button是子元素，它们也会得到居中对齐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 3

使用此CSS：由于您的元素包含在标题类中，因此请使用

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

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

<强>演示：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 4

您可以使用css属性＆＃34; text-align：center;＆＃34;在类标题或导航上像：

.header {
    text-align: center;
}

或

nav {
    text-align: center;
}

您可以选择上述解决方案之一。

为了你的帮助，我也分享了一个小提琴链接。请看一看。如果您发现任何错误，请告诉我。 http://fiddle.jshell.net/8hkcnqy3/

你如何集中块元素？

4 个答案: