Question

我有一排元素，但其中一个元素位于中间，应该居中。尝试运行这个简单的片段，“必须在中间”的东西不在中间，但我希望它是，尽管它周围的东西大小。 “text-align：center”无济于事，因为它将整个元素列表放在中间，并且我不知道我希望“中间”的东西位于中间：

.the-whole {
  width: 100%;
  text-align: center;
}
.side-thing {
  display: inline-block;
  margin: 8px;
}
.the-center {
  display: inline-block;
  font-weight: bold;
}

<div class="the-whole">
  <div class="side-thing">
    long thing at left
  </div>
  <div class="side-thing">
    a
  </div>
  <div class="side-thing">
    b
  </div>
  <div class="the-center">
    (Must be in the Middle)
  </div>
  <div class="side-thing">
    c
  </div>
  <div class="side-thing">
    d
  </div>

</div>

Answer 1

如果您可以更改HTML，则可以将左右元素移动到居中的元素中：

.the-whole {
  width: 100%;
  text-align: center;
}
.side-thing {
  display: inline-block;
}
.the-center {
  display: inline-block;
  position: relative;
  margin: 8px;
  padding: 0 10px;
}
.the-center span {
  font-weight: bold;
}
.left {
  position: absolute;
  white-space: nowrap;
  right: 100%;
  top: 0;
}
.right {
  position: absolute;
  white-space: nowrap;
  left: 100%;
  top: 0;
}

<div class="the-whole">

  <div class="the-center">
    <div class="left">
      <div class="side-thing">
        long thing at left
      </div>
      <div class="side-thing">
        a
      </div>
      <div class="side-thing">
        b
      </div>
    </div>
    <span>(Must be in the Middle)</span>
    <div class="right">

      <div class="side-thing">
        c
      </div>
      <div class="side-thing">
        d
      </div>
    </div>
  </div>

</div>

Answer 2

使用display:flex解决方案。

＆＃13;

.the-whole {
  display: flex;
}
.the-whole div {
  display: inline;
}
.the-whole > div {
  flex: 1;
  border: 1px solid green;
}
.the-whole > div.center {
  text-align: center;
}

＆＃13;

<div class="the-whole">
  <div class="left">
    <div>
      long thing at left
    </div>
    <div>
      a
    </div>
    <div>
      b
    </div>
  </div>
  <div class="center">
    <div>
      (Must be in the Middle)
    </div>
  </div>
  <div class="right">
    <div>
      c
    </div>
    <div>
      d
    </div>
  </div>

</div>

＆＃13;

Answer 3

您可以使用flexbox：

＆＃13;

.the-whole {
  display: flex;
}
.side {
  flex: 1; /* Distribute remaining width equally among the left and right parts */
}
.the-left {
  text-align: right;
}
.the-right {
  text-align: left;
}
.side-thing {
  display: inline-block;
  margin: 0 8px;
}
.the-center {
  font-weight: bold;
}

＆＃13;

<div class="the-whole">
  <div class="the-left side">
    <div class="side-thing">long thing at left</div>
    <div class="side-thing">a</div>
    <div class="side-thing">b</div>
  </div>
  <div class="the-center">(Must be in the Middle)</div>
  <div class="the-right side">
    <div class="side-thing">c</div>
    <div class="side-thing">d</div>
  </div>
</div>

＆＃13;

Answer 4

我认为最好插入一个新的div。所以你将有七个。只有一个在中心。

LinkedHashMap

#page{
	
	width: 100%;
	text-align: center;
	}

.the-whole {
	width: 39%;
	display: inline-block;
	text-align: center;
}

.side-thing {
  min-width: 10%;
  display: inline-block;
  text-align: center;
  margin: 0px;
  border: 0.1em solid red;
}
.side-thing-left{
  min-width: 40%;
  display: inline-block;
  text-align: center;
  margin: 8px;
  border: 0.1em solid red;
}
.the-center {
  width: 20%;
  display: inline-block;
  font-weight: bold;
  border: 0.1em solid green;
}

Answer 5

尝试使用保证金：自动。像这样：

.the-center {
  display: inline-block;
  font-weight: bold;
  margin: auto;
}

Answer 6

这是一个解决方案吗？

.the-whole {
  width: 100%;
  text-align: center;
}
.side-thing {
  float: left;
  margin: 8px;
}
.the-center {
  float: left;
  font-weight: bold;
  margin: 0 auto;
}

如何在中间保留特定元素？

6 个答案: