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

【问题标题】：CSS: How can I center 2 elements next to each other (inline-block) only that share a container with other elements?CSS：我如何才能将 2 个彼此相邻的元素（内联块）居中，仅与其他元素共享一个容器？
【发布时间】：2014-08-10 00:25:22
【问题描述】：

我正在为网站创建用户样式，因此我无法更改任何 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 比较陌生，我一直在寻找一种方法来做到这一点，但无济于事。

【问题讨论】：

标签： css userstyles

【解决方案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;
}

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

新编辑

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

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

PS：这仅与您的 link 有关。

【讨论】：

我无法添加元素，我正在做一个用户样式。我只能尝试使用 CSS。
在这种情况下，您可以使用 position: relative;左：x%；其中 x 是一个整数，并使用媒体查询针对各种分辨率进行调整。否则，您必须将容器 div 本身居中。你有一个未闭合的 div 标签。关闭它。
我已经对您的网站进行了调整，并将它们置于中心位置。在答案中查看我的新编辑部分。
它将他们带到中心，但这并不实用，因为随着更多用户浏览论坛，“p”会变宽。
然后，不要让事情复杂化（因为你正在做用户风格），我建议你将它们都对齐到中心并一个接一个地放置。那看起来也不错。 :P 至少在找到解决方案之前。

【解决方案2】：

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

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

边距：0 自动；

【讨论】：

我正在尝试在那里重新创建代码，但 display:inline-block 并没有使它们彼此相邻。我什至尝试让它们向左浮动，但这也不起作用。您的保证金建议无效 D：
你不能把容器放在它周围吗？因为这将帮助您将元素居中； jsfiddle.net/45qpu0c2/2
h3 和 p 不相邻。
您的解决方案显然在 jsfiddle 中有效，但由于某些我找不到的原因，它不适用于网站 D：
这很奇怪，因为我使用了该网站的代码.. 只是将其剥离为只有所需的元素。

【解决方案3】：

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

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

【讨论】：

我删除了 float 属性，但它仍然不起作用。我的意思是我希望它们水平居中。
如果您能给我们提供一个具体的例子，帮助您解决问题会更容易。通过具体示例，我的意思是发布完整的 html 和 css :)
完整的html是这个网站link。我只为论坛元素制作的 CSS 是这样的：link 这是论坛的底部，谁在线以及我想应用它的以下段落。我在 CSS 中的选择器是：.navbar.panel + h3 和下一个。我试图在 jsfiddle 中放置一个基本示例，但 display:inline-block 并没有使 h3 和 p 彼此相邻。