Question

我在stackoverflow上查看了几篇帖子，找不到解决我问题的答案。这个问题似乎和许多其他问题一样，简单的区别在于我试图将文本置于中心，这些文本将会发生变化，我希望它完全集中在中心。

以下是我目前的基本示例;底部的文本在左侧和右侧的文本之间居中，其中顶部的文本在DIV中居中。底部的文字应该反映出来。

我尝试过多种解决方案，从显示：内联块（减少我的间隔宽度）到边距：0自动，一直到将包含div转换为显示：table-cell，vertical align middle。

任何帮助将不胜感激！

body {
  background: #333;
  color: white;
}
.container {
  width: 80%;
  height: 150px;
  position: relative;
  left: 10%;
}
.container .slide, li { display: none; }
.active { display: block !important; }
.header { text-align: center; }
ul {
  margin: 0;
  padding-left: 0px;
}
li {
  list-style: none;
  font-variant: small-caps;
}
.spacer {
  width: 100%;
  height: 1px;
  background: white;
  box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
  margin-top: 5px;
  margin-bottom: 5px;
}
.slide {
  width: 100%;
  height: 79%;
  background-color: white;
}
.focus { text-align: center; }
.left { float: left; }
.right { float: right; }

<div class="container">
  <div class="header">
    <div class="spacer"></div>
    <ul>
      <li class="active">Summary</li>
    </ul>
    <div class="spacer"></div>
  </div>
  <div class="slide active">
  </div>
  <div class="slide">
  </div>
  <div class="focus">
    <div class="spacer"></div>
    <ul class="left">
      <li class="active">ASDF</li>
    </ul>
    <ul class="right">
      <li class="active">POV - ASR</li>
    </ul>
    <ul>
      <li class="active">LKJHGFDSAPOIURTQAJK</li>
    </ul>
    <div class="spacer"></div>
  </div>
</div>

修改这篇文章无法使用两个相关问题中使用的答案;虽然它们本质上是相似的，但是使用纯CSS（SCSS可能但不是CSS3）不能为我的LI元素设置特定的宽度来实现完美的中心。显示：表格答案对我不起作用。因此我把它作为一个新问题的原因;在发布我的问题之前，我尝试了15种不同的建议答案。

Answer 1

如果您不希望左右项目影响中心项目的定位，可以使用position: absolute;将其从流程中移除。

完成此操作后，您可以使用left或right对齐它们。

ul.left, ul.right {
    position: absolute;
}

ul.left {
    left: 0;
}

ul.right {
    right: 0;
}

工作示例：

body {
  background: #333;
  color: white;
}
.container {
  width: 80%;
  height: 150px;
  position: relative;
  left: 10%;
}
.container .slide, li { display: none; }
.active { display: block !important; }
.header { text-align: center; }
ul {
  margin: 0;
  padding-left: 0px;
}
li {
  list-style: none;
  font-variant: small-caps;
}
.spacer {
  width: 100%;
  height: 1px;
  background: white;
  box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
  margin-top: 5px;
  margin-bottom: 5px;
}
.slide {
  width: 100%;
  height: 79%;
  background-color: white;
}
.focus { text-align: center; }

ul.right {position: absolute; right: 0;}
ul.left {position: absolute; left: 0;}

<div class="container">
  <div class="header">
    <div class="spacer"></div>
    <ul>
      <li class="active">Summary</li>
    </ul>
    <div class="spacer"></div>
  </div>
  <div class="slide active">
  </div>
  <div class="slide">
  </div>
  <div class="focus">
    <div class="spacer"></div>
    <ul class="left">
      <li class="active">ASDF</li>
    </ul>
    <ul class="right">
      <li class="active">POV - ASR</li>
    </ul>
    <ul>
      <li class="active">LKJHGFDSAPOIURTQAJK</li>
    </ul>
    <div class="spacer"></div>
  </div>
</div>

我删除了您的float属性，因为通过此实现，它们不再是必需的。

Answer 2

我会将页脚中的3个链接放在一个ul中，使用display: flex上的ul和flex: 1 0 0上的li＆＃ 39; s这样他们就会占用相同的空间，然后在每个text-align中使用li来定位文本。

＆＃13;

body {
  background: #333;
  color: white;
}

.container {
  width: 80%;
  height: 150px;
  position: relative;
  left: 10%;
}

.container .slide,
li {
  display: none;
}

.active {
  display: block !important;
}

.header {
  text-align: center;
}

ul {
  margin: 0;
  padding-left: 0px;
}

li {
  list-style: none;
  font-variant: small-caps;
}

.spacer {
  width: 100%;
  height: 1px;
  background: white;
  box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
  margin-top: 5px;
  margin-bottom: 5px;
}

.slide {
  width: 100%;
  height: 79%;
  background-color: white;
}

.focus {
  text-align: center;
}

/* new stuff */
.bottom {
  display: flex;
}

.bottom li {
  flex: 1 0 0;
}

.bottom li:first-child {
  text-align: left;
}

.bottom li:last-child {
  text-align: right;
}

＆＃13;

<div class="container">
  <div class="header">
    <div class="spacer"></div>
    <ul>
      <li class="active">Summary</li>
    </ul>
    <div class="spacer"></div>
  </div>
  <div class="slide active">
  </div>
  <div class="slide">
  </div>
  <div class="focus">
    <div class="spacer"></div>
    <ul class="bottom">
      <li class="active left">ASDF</li>
      <li class="active left">LKJHGFDSAPOIURTQAJK</li>
      <li class="active left">POV - ASR</li>
    </ul>
    <div class="spacer"></div>
  </div>
</div>

＆＃13;

真正的中心文本在Div

2 个答案: