Question

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

这是小提琴： 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。

，而不是为这些行使用两个额外的元素

＆＃13;

#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%);
}

＆＃13;

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

＆＃13;

如果您希望标题为width，则可以将10%：伪元素设置为20%（最多可加80%）。

＆＃13;

#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%);
}

＆＃13;

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

＆＃13;

Answer 2

不要使用花车:( 您可以执行以下操作之一： - 将display: table应用于父级，display: table-cell应用于子级元素 - 将display:inline应用于inside-h2 divs

Answer 3

最简单的方法是给你的两个外部div一个margin-top：

h2 div:nth-child(1), h2 div:nth-child(3) { background-color: #000; height: 1px; margin-top: 13px; }

并且您的h2标记为0的边距，因此它不会抵消三个div。

<强> JSFIDDLE

如何在h2标签中垂直对齐div？

3 个答案: