Html 标题与人力资源行

我需要做一个简单的标题，但有一条线穿过它。正如图中所示：

下面是代码：

• HTML:

            <div id="intro">
            <div class="bg_big bg_big_green glow"><div id="opac1"><h1>TITLE WITH LINE</h1><p>111</p></div></div>
                <div class="story">
                <div class="float-left">
  
  
                </div>
              </div> <!--.story-->
  
  
            </div> <!--#intro-->
  

  
  标题中有一行111
  
  

这里的所有代码：

基本上我只是玩了

显示

属性

编辑：我将此保留在这里，因为它仍然是一个选项，但评论中的Paulie有一组更好的选项。

这相当简单

首先，给容器一个

文本对齐：居中
，给标题一个
显示：内联块
和
位置：相对
。这将使您的标题居中，并使其成为块。然后，使用
：：before
和
：：after
伪元素，在任一侧设置样式和位置线。我发现这是最有益的方法，因为它会根据您的长度来定位自己

这是一把干净的小提琴：

您应该使用CSS:before和：after-psuedo类。Chris Coyier提供了一些优秀的CSS教程

下面是一个JSFIDLE示例，它展示了如何使用psuedo类在页面的任一侧添加一行代码，以达到所需的效果。祝你好运
 -许多选择这是非常重要的。最简单的方法是使用浏览器调试控制台检查截图的原始源代码。对于这个问题，有一些非常好的答案。这对于响应式设计非常有用：请参阅
/* The h1's container */
#opac1 {
  text-align:center;
}
h1 {
    position:relative;
    display:inline-block;
}
h1::before, h1::after {
    content:' ';
    display:block;
    position:absolute; top:50%; left:-120px;
    width:100px; /* 100px line on either side */
    border-bottom:1px solid #FFF;
}
h1::after {
    left:auto; right:-120px; /* make the "after" position on the right side of the h1 */
}

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}