【解决问题】给分割线加上文字，标题两边加上线

原文出处
You can make a line on both sides of the title with 2 pseudo elements and borders:
你可以做一条线两边的标题2伪元素和边界:

This works over a transparent background (lines and title have transparent backgrounds).
这是在一个透明背景(和标题具有透明背景行)。

The line length will adapt to the title width so they alway start and end at the same position regardless to title length.
线长将适应标题宽度,所以他们总是开始和结束在同一位置标题长度无关。

The title can span on several lines while the left and right lines stay verticaly centered (Note that you need to wrap the title in a tag for this to work.
标题可以跨越几行而左右线保持verticaly集中(注意,你需要包装在一个< span >标记工作。

See demo)
见演示)

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 body {
  background-image: url(http://i.imgur.com/EzOh4DX.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  font-family: 'Open Sans', sans-serif;
}
h1 {
  width: 70%;
  margin: .7em auto;
  overflow: hidden;
  text-align: center;
  font-weight:300;
  color: #fff;
}
h1:before, h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {
  margin: 0 -55% 0 .5em;
}
span {
  display: inline-block;
  vertical-align: middle;
}

<h1 class="divider">Today</h1>
<h1 class="divider">Today news</h1>
<h1 class="divider"><span>Today<br/>news</span></h1>