当被其他弹性项目包围时，容器中的弹性项目居中-PHP中文网问答

我有一个弹性盒（请参阅下面的代码片段作为示例）。

我想设置它，以便在所有情况下，

位于 flex-box 的中心，其他跨度将围绕它流动，基于他们的标记。

我基本上是在寻找 `align-self` CSS 代码，但是是针对主轴，而不是横轴（这可能有助于解释我的要求）。

我还将 `margin: auto;` 应用于我的

，这是我在阅读本文后了解到的（一个很棒的页面，但它仍然让我留下了我的以下问题 - 除非我没有完全理解所有内容）。

这是我得到的代码：

.container {
  align-items: center;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  width: 100%;
}
h2 {
  margin: auto;
]

<div class="container">
  <h2>I'm an h2</h2>
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
</div>
<div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
  <h2>I'm an h2</h2>
  <span>I'm span 4</span>
  <span>I'm span 5</span>
  <span>I'm span 6</span>
</div>
<div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <h2>I'm an h2</h2>
  <span>I'm span 3</span>
</div>

要完全重申我的问题：我想知道如何将
在我的页面上居中，以便无论其他在哪里，
将始终位于弹性框的死点中心。

P.S.：我愿意使用 JavaScript 和 jQuery，但我更喜欢使用纯 CSS 方式来实现这一点。

迈克尔·本杰明回答后：

他的回答让我思考。虽然我还没有找到一种方法来做到这一点，但我相信以下是朝着正确方向迈出的一步：

HTML

<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div>

CSS

.container div {
  flex: 1 1 auto;
  text-align: center;
}
h2 {
  flex: 0 0 auto;
  margin: auto;
}

.container {
  align-items: center;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  width: 100%;
}
.container div {
  flex: 1 1 auto;
  text-align: center;
}
h2 {
  flex: 0 0 auto;
  margin: auto;
}

<div class="container">
  <div>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div>
<div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 3</span>
  </div>
</div>

基本上，理论是，虽然的总数未知，但已知总共有三个元素：

正如您在上面的代码片段中看到的，我尝试过（flex: 0 0 auto和flex: 1 1 auto等）让它工作但还没有成功。谁能告诉我这是否是朝着正确方向迈出的一步，以及如何将其推向实际产品？

P粉042455250

全部回复(2)

P粉7262346482023-08-26 12:03:04 2楼

一种方法是在两侧添加空跨度，然后将跨度和 h2 设置为某个弹性值，如下所示：

.container {
  align-items: center;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  width: 100%;
}
h2 {
  margin: auto;
  text-align: center;
  flex: 3 0;
}
span{
  flex: 1 0;
}

<div class="container">
<span></span>
<span></span>
<span></span>
  <h2>I'm an h2</h2>
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
</div>
<div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
  <h2>I'm an h2</h2>
  <span>I'm span 4</span>
  <span>I'm span 5</span>
  <span>I'm span 6</span>
</div>
<div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span></span>
  <h2>I'm an h2</h2>
  <span>I'm span 3</span>
  <span></span>
  <span></span>
</div>

所以你保证两边的空间相等。那么唯一的问题是您必须确定您希望 h2 采用多少宽度。

赞 +0

添加回复

P粉4289867442023-08-26 00:15:33 1楼

Flex 对齐属性通过分配容器中的可用空间来发挥作用。

因此，当一个 Flex 项目与其他项目共享空间时，没有单步方法可以将其居中，除非两侧同级项目的总长度相等。

在第二个示例中，h2 两侧的跨度总长度相等。因此，h2 完全位于容器的中心。

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
    margin: 5px;
    padding: 5px;
}
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }

<div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
  <h2>I'm an h2</h2>
  <span>I'm span 4</span>
  <span>I'm span 5</span>
  <span>I'm span 6</span>
</div>
<p><span>TRUE CENTER</span></p>

赞 +0

添加回复