将一个元素与多个兄弟元素一起居中

Question

我有一个 div，里面有一些跨度，宽度可能相等，也可能不相等。我知道我可以使用 text-align: center 使 div 中的所有内容居中。但是，我想选择一个特定的跨度，并将其指定为真正的中心，而不是将中心指定为跨度序列的中点。

我必须模拟这种效果的一个想法是：我有我想要的中间元素，其左右有两个容器；左边的是右对齐的，反之亦然。这些容器将容纳 div 中的其他内容。如果我能让这两个容器等量地填满剩余的 space，这将具有使中间元素居中同时保持左右内容与中心对齐的效果。基本上，这需要将两个容器的宽度设置为 div 中剩余 space 的一半。（我不想改变中间 div 的大小。）这可能只用 CSS 吗？

示例：有 4 个跨度，如何将跨度 2 指定为真正的中心？

div {
  width: 500px;
  padding: 4px;
  border: 1px dotted black;
}
span {
  display: inline-block;
  width: 100px;
  text-align: center;
  margin: 4px;
  box-sizing: border-box;
  border: 1px dotted black;
}
#b {
  /* ??? */
}

<div>
  <span id="a">1</span>
  <span id="b">2</span>
  <span id="c">3</span>
  <span id="d">4</span>
</div>

Answer 1

这可以使用 flexbox 来完成。您可以在 div 上使用 display:flex;，在 2nd span 上使用 flex-grow:1;。这样你就可以用那个跨度覆盖整个 div。

由于第 1 个和第 3 个跨度的宽度已经相等，因此第 2 个跨度位于死点。然后在 2 号使用 flex-basis 以获得所需的宽度。

div.container{
  width: 500px;
  padding: 4px;
  border: 1px dotted black;
}
div.row{
  display:flex;
  align-items:center;
  justify-content:center;
}
span {
  display: inline-block;
  width: 70px;
  text-align: center;
  margin: 4px;
  box-sizing: border-box;
  border: 1px dotted black;
  transform:translate(50%,0);
}
#b {
}

<html>

<head></head>

<body>
  <div class='container'>
    <div class="row">
      <span id="a">1</span>
      <span id="b">2</span>
      <span id="c">3</span>
      <span id="d">4</span>
    </div>
  </div>
</body>

</html>

Answer 2

我建议使用 3 列布局，并使用 CSS table 结构。使第 1 列和第 3 列占总宽度的 50%，中间列只有 0，但它会重新计算宽度以适合内容并保持居中，因为它在 table.

中

也放white-space: nowrap;以防里面有多个单词，但如果只有一个单词或固定宽度，则根据需要将其删除。

.container {
  display: table;
  border-collapse: collapse;
  width: 100%;
}
.item {
  display: table-cell;
  vertical-align: top;
  padding: 4px;
  border: 1px solid grey;
}
.item-a {
  width: 50%;
  text-align: right;
}
.item-b {
  text-align: center;
  white-space: nowrap; /* remove as needed */
}
.item-c {
  width: 50%;
}
.item span {
  display: inline-block;
  border: 1px solid red;
}
.item-b span {
  padding: 0 50px; /* for demo only */
}

<div class="container">
  <span class="item item-a">
    <span>1</span>
  </span>
  <span class="item item-b">
    <span>2</span>
  </span>
  <span class="item item-c">
    <span>3</span>
    <span>4</span>
  </span>
</div>

jsFiddle

Answer 3

你可以使用 flexbox。基于、

.outer-wrapper {
  display: flex;
  padding: 4px;
  border: 1px dotted black;
}
.item {
  margin: 4px;
  text-align: center;
  border: 1px dotted black;
}
.left.inner-wrapper, .right.inner-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-start;
  min-width: -webkit-min-content; /* Workaround to Chrome bug */
}
.left.inner-wrapper {
  justify-content: flex-end;
}
.animate {
  animation: anim 5s infinite alternate;
}
@keyframes anim {
  from { min-width: 0 }
  to { min-width: 50vw; }
}

<div class="outer-wrapper">
  <div class="left inner-wrapper">
    <div class="item animate">1. Left</div>
  </div>
  <div class="center inner-wrapper">
    <div class="item">2. Center</div>
  </div>
  <div class="right inner-wrapper">
    <div class="item">3. Right</div>
    <div class="item">4. Right</div>
  </div>
</div>
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item animate">2. Center</div></div><div class="right inner-wrapper"><div class="item">3. Right</div><div class="item">4. Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item">2. Center</div></div><div class="right inner-wrapper"><div class="item animate">3. Right</div><div class="item">4. Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item">2. Center</div></div><div class="right inner-wrapper"><div class="item">3. Right</div><div class="item animate">4. Right</div></div></div>

这将尝试将所需元素居中，但如果一侧不适合，它将被推入以防止重叠。

将一个元素与多个兄弟元素一起居中

Center one element along with multiple siblings

html

css

centering