html - 如何垂直对齐 h2 标签中的 div？

Question

好吧，我想垂直对齐三个 div，一个在左边，一个在右边，另一个在中间。

这是 fiddle : http://jsfiddle.net/MK01/6qxm3n5s/

这是html代码:

<h2>
    <div></div>
    <div id="Title">My Title</div>
    <div></div>
</h2>

这是CSS代码:

h2 div{
    float: left;
    width: 30%
}
h2 div:nth-child(1), h2 div:nth-child(3){
    background-color: #000;
    height: 1px
}
#Title{
    text-align: center
}

我尝试了很多技巧和技巧，但似乎都不起作用。

谢谢你，MMK。

Answer 1

您可以使用 :pseudo-elements 而不是为这些行使用两个额外的元素。

#Title:after,
#Title:before {
  position: absolute;
  content: '';
  background-color: #000;
  height: 1px;
  top: 50%;
  margin-top: -1px;
  left: 0;
  width: 33.3%;
}
#Title:after {
  left: 66.66%;
}
#Title {
  position: relative;
  text-align: center;
  width: 100%;
  background: linear-gradient(90deg, transparent 33.3%, tan 33.3%, tan 66.6%, transparent 66.6%);
}

<h2><div id="Title">My Title</div></h2>

---

如果您想要标题，您可以将 :pseudo-elements 的 width 设置为 10%(将加起来为 20%)为 80%。

#Title:after,
#Title:before {
  position: absolute;
  content: '';
  background-color: #000;
  height: 1px;
  top: 50%;
  margin-top: -1px;
  left: 0;
  width: 10%;
}
#Title:after {
  left: 90%;
}
#Title {
  position: relative;
  text-align: center;
  width: 100%;
  background: linear-gradient(90deg, transparent 10%, tan 10%, tan 90%, transparent 90%);
}

<h2><div id="Title">My Title</div></h2>