CSS：如何使这些双线与文本垂直居中？

Question

我知道border有double属性。我是否需要使用border修改一些位置：double以使其工作？

Answer 1

您可以使用CSS渐变，使用色标来创建线条。

http://jsfiddle.net/uUNLD/1/

p {
    background-image: -webkit-linear-gradient(silver 0, silver 1px, white 1px, white 4px, silver 4px, silver 5px, white 5px);
    background-image: -moz-linear-gradient(silver 0, silver 1px, white 1px, white 4px, silver 4px, silver 5px, white 5px);
    background-image: -ms-linear-gradient(silver 0, silver 1px, white 1px, white 4px, silver 4px, silver 5px, white 5px);
    background-image: -o-linear-gradient(silver 0, silver 1px, white 1px, white 4px, silver 4px, silver 5px, white 5px);
    background-position: 0 .4em;
}

Answer 2

使用double进行此操作会很困难，但这是另一种方法。

http://jsfiddle.net/brenjt/SZG6X/1/

<强> HTML

<div class="box"><span class="text">BACKGROUND</span></div>

<强> CSS

.box {
    width:100%;
    height:3px;
    border-top:1px solid #DDD;
    border-bottom:1px solid #DDD;
    text-align:center;
    line-height:3px;
}

.box .text {
    background: #FFF;
    padding:3px 6px;
    font-size:0.9em;
    color:#DDD;
}

Answer 3

我喜欢这种效果。有一天可能会用它

  h1 {
    text-align: center;
    position: relative;
    text-transform: uppercase;
    font-size: 1em;
    color: #ccc
  }
  h1:before {
    content: "";
    border-top: solid 1px;
    border-bottom: solid 1px;
    position: absolute;
    top: 39%;/* might need some tweaking */
    left: 0;
    width: 100%;
    height: 10%;

  }

  h1 span {
    background: #fff;
    padding: 0 4px;
    position: relative;
  }

它使用这个html：

<h1><span>Hello World</span></h1>

实时版：http://jsbin.com/abasif/

Answer 4

<h1>Hello, World!</h1>

h1 { color: gray; height: 10px; }
h1:before, h1:after { content: ''; border: 1px solid gray; width: 35%; display: inline-block; height: 5px; border-left: none; border-right: none; margin: 0 10px; }

http://jsfiddle.net/Hn7Hk/