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

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。

 #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> 

---

如果希望标题为80% ，则可以将：pseudo-elements的width设置为10% （总计为20% ）。

 #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> 

Answer 2

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

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