CSS：如何只将与其他元素共享容器的2个元素彼此相邻（内联块）中心？

Question

我正在为网站创建用户风格，因此我无法更改任何HTML，只有纯CSS。

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

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

</div>

我想让h3和p彼此相邻并且在容器的水平中心。所以，我给它们两个显示：inline-block和text-align：center。这使得他们紧挨着每一个，但不是以中心为中心。 text-align：center仅在应用于容器时才有效，但这将使整个站点的其他元素的所有文本居中。

我对CSS比较陌生，而且我已经找到了一种方法来做到这一点，但是没有用。

Answer 1

如果你可以添加一个新的 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标记。这是bin。

新编辑

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

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

PS ：这仅与您的link相关。

Answer 2

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

据我所知，也许只在h3和p标签上添加一个余量就够了？

  

保证金：0自动;

Answer 3

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

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