How to make the headline (H1 with lines on the sides) with CSS only

问题

I have made some a fiddle of such a headline that I need.

CSS:

body {
    background:url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/tiny_grid.png");
}

.main-container {
    width: 600px;
    margin: 0 auto;
    box-shadow:0 0 5px #d00;
}

.headline {
    display: inline-block;
    margin: 40px 0;
    padding: 0 30px;
    font: normal 33px/1.1 Georgia, "Times New Roman", Times, serif;
    color: #3E3E3E;
    height: 1px;
    border-left: 300px solid #aaa;
    border-right: 300px solid #aaa;
    white-space: nowrap;
}

.headline > span {
    display:block;
    margin-top:-17px;
}

HTML:

<div class="main-container">
    <h1 class="headline"><span>OUR LATEST WORKS</span></h1>
</div>

This is not the full solution, because I use the borders around the text that push out the text from the parent container.

Is there any other ways to do it? But without additional divs and JS.

PS: The background image may be different, so I already try to put the same bg under the text but it's not the solution.

PPS: The "div.main-container" must no contain the overflow:hidden

回答1:

I came up with something like this http://jsfiddle.net/olgis/qkNfm/, similar to @GionaF solution just without fixed width, but still you will need a container to get red line underneath the text.

As I understand your criteria for solution is:

any background
NO JavaScript or jQuery
css liquid layout (NO fixed width)
minimal HTML
cross browser solution

In this post http://www.impressivewebs.com/centered-heading-horizontal-line/, they are discussing "Centered Heading Overlaying a Horizontal Line with CSS" a lot of different solutions as well as a cross platform issue.

My guess would be you are aiming for something like this http://result.dabblet.com/gist/1560674 a neat solution with just one H1 .

回答2:

It's hard without setting a background on h1's text, so it's a tricky workaround.

Check this demo

HTML:

<div class="main-container">
    <h1 class="headline">
        <span>&nbsp;</span>
        <span>OUR LATEST WORKS</span>
        <span>&nbsp;</span>
    </h1>
</div>

CSS:

.main-container {
    width: 600px;
    margin: 0 auto;
    box-shadow:0 0 5px #d00;
}
.headline {
    font: normal 33px Georgia, "Times New Roman", Times, serif; /* no line-height here */
    color: #3E3E3E;
    display:table;
    text-align:center;
}
.headline > span {
    display:table-cell;
}
.headline > span:nth-child(2) {
    width:50%;
    padding:0 0.2em;
    white-space:nowrap;
    line-height:1.2em;
}
.headline > span:nth-child(1), .headline > span:nth-child(3) {
    border-top:1px solid #CCC;
    width:25%;
    position:relative;
    top:0.6em;
}

回答3:

......................

Hi now check to this demo http://jsfiddle.net/zxzLT/22/

add this css

.headline {
    display:block;
    margin: 40px 0;
    padding:30px;
    font: normal 33px/1.1 Georgia, "Times New Roman", Times, serif;
    color: #3E3E3E;
text-align:center;
    white-space: nowrap;
    position:relative;
}
.headline:after{
content:'';
    position:absolute;
    border-top: 1px solid #aaa;
    left:0;
    right:0;
    height:1px;
    z-index:-1;
    top:50%;
}

.headline > span {
    display:inline-block;
    background:url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/tiny_grid.png");
    padding:0 30px;
}

Live demo

回答4:

A solution with only one element h1 (no span inside, no div wrapper) and no js (pure css) with transparent background:

http://puigcerber.wordpress.com/2013/03/08/centered-heading-overlaying-a-horizontal-line-with-css/

See it in action: http://jsfiddle.net/vLwDf/970/

回答5:

You could use border-right and left if thats what you need. See the link http://www.quackit.com/css/properties/css_border-right-style.cfm for more details on how this works.

EDIT You could put the borders on the h1 element instead of in the container of that h1

回答6:

if what you are trying to achieve is to have the containing div keep the h1 within its bounds, you should either try this:

.main-container {
    box-shadow: 0 0 5px #DD0000;
    display: table-row; /* i added this line */
    margin: 0 auto;
    width: 600px;
}

or increase the width of .main-container to something like 1000px.

回答7:

.main-container {
    width: 600px;
    height: 80px;
    margin: 0px auto;
    box-shadow: 0px 0px 5px #d00;
}

.headline {
    display: inline-block;    
    margin: 20px 0px 0px 0px;
    font: normal 33px/1.1 Georgia, "Times New Roman", Times, serif;
    color: #3E3E3E;
    white-space: nowrap;
}

.headline span {
    margin: 0px -40px 0px 0px;
    display:inline-block;
    position: relative;
    left: 50%;
    text-align:center;
}

来源：https://stackoverflow.com/questions/12687385/how-to-make-the-headline-h1-with-lines-on-the-sides-with-css-only

标签

css

html-heading