css - CSS：我如何才能将 2 个彼此相邻的元素（内联块）居中，仅与其他元素共享一个容器？

Question

我正在为网站创建用户样式，所以我不能更改任何 HTML，只能更改纯 CSS。

<div class="container"></div>

   <divs>
   <h2s>
   <uls>
   <forms>
   <h3></h3>
   <p></p>

</div>

我想让 h3 和 p 彼此相邻并位于容器的水平中心。所以，我给了他们两个 display:inline-block 和 text-align:center。这使它们彼此相邻，但不是水平居中。text-align:center 仅在应用于容器时才有效，但这将使整个站点的其他元素的所有文本居中。

我对 CSS 比较陌生，我一直在寻找一种方法来做到这一点，但无济于事。

score 1 · Accepted Answer

如果你可以添加一个新的div你可以试试，

HTML

<div class = "container">
  <div class = "side_center">
    <h3>h3 element</h3>
    <p> p element </p>
    </div>
  </div>

CSS

h3, p {
  display: inline-block;
}

.side_center {
  margin: 0px auto;
  display: table;
}

但是，我建议您通过添加单独的类或ID来设置常用元素的样式，因为不这样做可能会影响页面中的其他 h3 和 p 标签。这是垃圾箱。

新编辑

h3 {
      text-align: center;
      margin-left: -253px;
  }  

 p {
     margin-top: -22px;
     margin-right: -189px;
     text-align: center;
  }

PS：这仅与您的链接有关。

score 0 · Accepted Answer

如果您使用display:inline-block;，则不必使用任何float属性。

我猜你的意思是text-align:center;使它们水平居中。如果您希望它们垂直居中，您可以使用vertical-align:middle;

score 0 · Accepted Answer

尝试将您的代码发布到jsfiddle中。

据我所知，也许只在 h3 和 p 标签上添加边距就足够了？

边距：0 自动；

3 回答 3