Question

如何将以下两个div放在同一页面的中心？

HTML

    <div class="setRegularFont centerText buttonText"><a href="#">BUTTON 1</a></div>
    <div class="setRegularFont centerText buttonText"><a href="#">BUTTON 2</a></div>

CSS

.buttonText {
    width: 10%;
    border: 1px solid #818181;
    color: #818181;
    margin-top: 2em;
    padding: 1em;
    display:inline-block;
}
.buttonText a,a:visited,a:active {
    text-decoration: none;
    color: #818181;
}
.buttonText a:hover, .buttonText:hover a {
    color: #1f1f1f;
    cursor: pointer;
}
.buttonText:hover {
    border: 1px solid #1f1f1f;
}

小提琴here。

Answer 1

将它们包裹在div中，然后将所有内容放在该div中。小提琴 - http://jsfiddle.net/p6mtfqv5/4/

CSS

.center {
    width:100%;
    text-align: center;
}

HTML 的

<div class="center"><div class="setRegularFont centerText buttonText"><a href="#">LAST MAN STANDING</a></div><div class="setRegularFont centerText buttonText"><a href="#">OF PURE GOLD</a></div></div>

Answer 2

What I did here我做了一个div：50％而另一个是左：50％。然后他们在中心粘在一起。（请注意，它们都必须有{position:absolute;}）

Answer 3

两种解决方案。您可以将这两个<div>与另一个<div>打包在一起，然后使用CSS将text-align属性设置为center <div>，例如这样：

＆＃13;

#centered {
  width: 100%;
  text-align: center;
}
.buttonText {
  width: 10%;
  border: 1px solid #818181;
  color: #818181;
  margin-top: 2em;
  padding: 1em;
  display: inline-block;
}
.buttonText a,
a:visited,
a:active {
  text-decoration: none;
  color: #818181;
}
.buttonText a:hover,
.buttonText:hover a {
  color: #1f1f1f;
  cursor: pointer;
}
.buttonText:hover {
  border: 1px solid #1f1f1f;
}

＆＃13;

<div id="centered">
  <div class="setRegularFont centerText buttonText"><a href="#">BUTTON 1</a>
  </div>
  <div class="setRegularFont centerText buttonText"><a href="#">BUTTON 2</a>
  </div>
</div>

＆＃13;

第二个解决方案是使用CSS简单地将text-align的{{1}}属性设置为<body>，如下所示：

＆＃13;

center

＆＃13;

body {
  text-align: center;
  }

.buttonText {
  width: 10%;
  border: 1px solid #818181;
  color: #818181;
  margin-top: 2em;
  padding: 1em;
  display: inline-block;
}
.buttonText a,
a:visited,
a:active {
  text-decoration: none;
  color: #818181;
}
.buttonText a:hover,
.buttonText:hover a {
  color: #1f1f1f;
  cursor: pointer;
}
.buttonText:hover {
  border: 1px solid #1f1f1f;
}

＆＃13;

Answer 4

只需将<div>标记放入<center>标记：

<center>
 <div class="setRegularFont centerText buttonText"><a href="#">BUTTON 1</a></div>
 <div class="setRegularFont centerText buttonText"><a href="#">BUTTON 2</a></div>
</center>

得到两个以页面为中心排列的div

4 个答案: