html - 如何在居中 Div 的左侧和右侧设置线条 - CSS

Question

我在一个 div 中有三个 div:

<div class="row second-top-margin">
    <div class="col-md-12 center">
        <div class="center-text">Responsive</div>
        <div class="center-text">Clean</div>
        <div class="center-text">Powerful</div>
    </div>
</div>

我想要做的是在单词 clean 的左右两侧获取垂直居中对齐的线条，如下所示:

有没有办法用 CSS 做到这一点？我尝试了很多不同的东西。我试图将左线、“Clean”和右线全部放在三个单独的 div 中，在一个名为 table 的新 div 中，并使它们 display: table-cell，但是当我摆脱 display: inherit 样式时，“Clean”不再显示在中心。

请看我的 JS fiddle 看看我在哪里:

https://jsfiddle.net/do4L2g4L/2/

有什么建议吗？谢谢!

附言我意识到这些线现在是 border-bottom - 我需要将它们垂直居中对齐，我只是想让它们暂时位于“Clean”的左侧和右侧。

Answer 1

不要使用 display:table使元素居中。 20 年前它就不再正常了。
我倾向于认为 display:table当用于居中时被误用(肮脏的 hack)(这比只使用 <table> 元素来完成任务要好，后者更糟糕，但仍然是误用)。一个简单的...

.between-lines {
  display: flex;
  align-items: center;
}

... 会做的。更新示例(取自 fiddle ):

.center {
  text-align: center;
}

.center-text {
  color: #ffffff;
  display: inherit;
  font-family: 'proxima_nova_ltsemibold';
  text-transform: uppercase;
  font-size: 52px;
}

.between-lines {
  display: flex;
  align-items: center;
}

.line {
  border-bottom: 2px solid #ffffff;
  display: block;
  flex-grow: 1;
  height: 0;
}

.clean {
  display: block;
  font-family: 'proxima_nova_ltsemibold';
  text-transform: uppercase;
  font-size: 52px;
  text-align: center;
  color: #ffffff;
  padding: 0 2rem;
}

body {
  background: #000000;
}

<div class="row second-top-margin">
  <div class="col-md-12 center">
    <div class="center-text">Responsive</div>
    <div class="between-lines">

      <div class="line"></div>
      <div class="clean">Clean</div>
      <div class="line"></div>

    </div>
    <div class="center-text">Powerful</div>
  </div>
</div>

注意:我替换了table用between-lines上课因为table Bootstrap 中已经有了一些样式，从外观上看，您正在使用它。

最后说明:如果您不使用带有集成前缀的部署工具，请考虑通过 autoprefixer 运行您的 CSS在上线之前。

---

这是一个不允许线条在宽屏幕上增长并在具有视口(viewport)高度的区域上垂直居中的版本。如果你不想那样，删除 height: 100vh来自 .center :

body {
  background: #000000;
  margin: 0;
}

.center {
  text-align: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-family: 'proxima_nova_ltsemibold';
  text-transform: uppercase;
  font-size: 52px;
}

.between-lines {
  display: flex;
  align-items: center;
}

.line {
  border-bottom: 2px solid #ffffff;
  display: block;
  flex-grow: 1;
  height: 0;
}

.clean {
  padding: 0 1.5rem;
}

.wrapper {
  margin: 0 auto;
}

<div class="row second-top-margin">
  <div class="col-lg-12 center">
    <div class="wrapper">
      <div class="center-text">Responsive</div>
      <div class="between-lines">

        <div class="line"></div>
        <div class="clean">Clean</div>
        <div class="line"></div>

      </div>
      <div class="center-text">Powerful</div>
    </div>
  </div>
</div>