Question

所以我一直在努力解决这个问题，而且动机只是为了学习，但我只想把两个<h2>标题中心放在一起。最好将它们包装在某种容器中，以便我可以简单地应用margin: 0 auto; Like：

<div>
  <h2>Hello!</h2>
  <h2>Hello!</h2>
</div>

Answer 1

我能想到的最简单的版本与发布的其他版本非常相似（抱歉）。

如果您不想影响页面中的所有其他h2，请为特定类别提供一个类

h2{
  display: inline-block;
}

.wrapper{
    text-align: center;
}

<div class="wrapper">
  <h2>Hello!</h2>
  <h2>Hello!</h2>
</div>

Answer 2

与Xahed有点不同的方法，但效果一样好在这里演示： http://jsfiddle.net/s0y9pg0L/

.container {
    margin: 0 auto;
    width:250px;
    border: 1px solid red;
}

.centered-text {
   text-align: center;   
}

h2 {
    display: inline-block;
}

使用HTML

<div class="container">
    <div class="centered-text">
        <h2>Hello!</h2>
        <h2>Hello!</h2>
    </div>
</div>

如果您真的要在网站上使用它，这是一个更多的证据。

Answer 3

在这里，我希望这会有所帮助。我认为这就是你们中间两个h2冠军的意思。

#wrapper {
  width: 500px;
  overflow: hidden;
  border: 1px solid black;
  margin: 0 auto
}
#title1 {
  float:left;
  width: 249px;
  margin: 0 auto;
  text-align: center;
}
#title2 {
  overflow: hidden;
  width: 249px;
  text-align: center;

}

<div id="wrapper">
  <div id="title1"><h2>Hello!</h2></div>
  <div id="title2"><h2>Hello!</h2></div>
</div>

将两个标题集中在一起

3 个答案: