Question

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

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

示例：如果有4个跨度，如何将span 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完成。您可以在display:flex;上使用div，并在flex-grow:1;上使用2nd span。这样你就可以用这个范围覆盖整个div。

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

＆＃13;

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 {
}

＆＃13;

<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>

＆＃13;

Answer 2

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

同时将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。基于this answer，

＆＃13;

.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; }
}

＆＃13;

<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>

＆＃13;

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

将一个元素与多个兄弟姐妹

3 个答案: