Using table css to provide a central line

by adamh

HTML

<h1><span></span><span class="text">Heading</span><span></span></h1>

CSS

h1 {
    display: table-row;
    width: 100%;
}

span {
    display: table-cell;
}

span.text {
    height: 20px;
    padding: 0 20px;
    margin-bottom: 20px;
}

span:first-child,
span:last-child {
    width: 50%;
    border-bottom: 1px solid black;
    line-height: 10px;
    margin-bottom: 10px;
}