8

I need to create a headline with equal length lines on both sides of the headline text, and a fixed size padding between the lines and the text. The text will vary so it must not set a width. The lines should take up all remaining width available in the headline container. The headline text must not set a background because the background behind it will vary. Something like this:

--------------------------------------------------------- Some text ---------------------------------------------------------

I solved it using a table:

<table width="100%">
  <td><hr /></td>
  <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
  <td><hr /></td>
</table>​

You can try it out here: http://jsfiddle.net/md2dF/3/

Semantically this is a really bad solution, the headline has nothing to do with tabular data. How would you do this without a table?

To summarize (because the suggested solutions have all overlooked one or more requirements):

  • The headline must not have a fixed width
  • The headline text must not have a background
  • The headline text must not have a fixed width
  • The lines on either side of the text must take up all remaining width
  • The padding between the lines and the text must have a fixed width
  • If in doubt, look at http://jsfiddle.net/md2dF/3/
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Robert Kajic
  • 8,689
  • 4
  • 44
  • 43

4 Answers4

22

Newer answer that works on newer versions of IE and Firefox

Without any tricks: ​

fieldset.title {
    border-top: 1px solid #aaa;
    border-bottom: none;
    border-left: none;
    border-right: none;
    display: block;
    text-align: center;
}

fieldset.title legend {
    padding: 5px 10px;
}
<fieldset class="title">
    <legend>Some text</legend>
</fieldset>

Live demo on jsfiddle

Gerald Schneider
  • 17,416
  • 9
  • 60
  • 78
  • 1
    Added `fieldset{padding: 0}` and it works great. Pretty clean solution; cleanest out of all other SO ones: http://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line http://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle http://stackoverflow.com/questions/10430557/how-to-add-some-text-to-a-hr-tag Best part about this method is there's no need to declare `background/-color`. Also no absolute positioning required, and takes good advantage of the clean `fieldset` element which already has requested feature. Nice! – LazerSharks Nov 28 '13 at 08:58
  • This really is a great solution compared to hiding the lines with a background color (doesn't work for images). Thanks! – Jason Oct 07 '14 at 04:21
  • 2
    -1 I tried this on Mac OS X 10.10.2 using Safari 8.0.3 (works), Chrome 40.0.2214.115 (works), and Firefox 36.0 (doesn't work). I also tried this on Windows 8.1 using Internet Explorer 11 (doesn't work), Chrome 40.0.2214.115 (works), and Firefox 36.0 (doesn't work). A solution that doesn't work in Firefox or Internet Explorer 11 isn't a great solution, in my opinion. – Nick Mar 03 '15 at 18:07
  • This doesn't work on IE or Safari for Mac OSX as above person said this cannot be the best solution – DJ22T Feb 04 '16 at 01:40
  • Is there a way to have some margin right and not modify the text from center.... ? – V. Sambor Mar 22 '17 at 16:24
  • Adding `align="center"` to the `` element will make this work in Firefox and IE, although I don't think it's strictly valid HTML. http://jsfiddle.net/KbScQ/375/ – Tim Down May 04 '17 at 13:42
  • Appears to work on modern browsers... tested Chrome, Firefox, and Edge. – AppDreamer May 06 '20 at 14:45
6

Edit:

Without any background color nor image:

<div>
    <div><hr></div>
    <span>Some text</span>
    <div><hr></div>
</div>​

CSS:

div {
    width:300px;
    text-align:center;
    display:table;
}
div > div {
    display:table-cell;
    vertical-align:middle;
}
div > span {
    white-space:nowrap;
}​

Works in IE8+

Live demo

Original answer:

Without any image:

<div>
<span>Some text</span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

​div {
    border-bottom:1px solid #000;
    line-height:16px;
    text-align:center;
}
span {
    background:#FFF;
    position:relative;
    bottom:-8px; /* half of line-height */
    padding:0 15px;
}

Live demo

You can use any block element you want (h1, h2, whatever) instead of div.

Community
  • 1
  • 1
Giona
  • 20,734
  • 4
  • 56
  • 68
  • As I stated in the question, the text must not have a background color. – Robert Kajic Sep 21 '12 at 00:05
  • The new answer is not correct either. The lines must take up all remaining width. Yours do not. – Robert Kajic Sep 21 '12 at 00:19
  • You can adjust span and hr size as needed. If the number of chars will vary a lot, your method seems to be the "best". – Giona Sep 21 '12 at 00:21
  • Both the text and the container must be able to vary. I don't want to manually adjust any widths. – Robert Kajic Sep 21 '12 at 12:10
  • ?! No it hasn't, check it: http://jsfiddle.net/gionaf/5pMDK/14/ change `background:yellow;` to any color you want – Giona Sep 21 '12 at 13:44
  • You didn't update the jsfiddle url in your answer so I only saw the old one. Anyway, that works with any background but it has a fixed width which it shouldn't. I have updated my question with a summary of all the requirements. – Robert Kajic Sep 21 '12 at 13:51
6

The way to solve this without knowing the width and the background color is the following:

Structure

<div class="strike">
   <span>Kringle</span>
</div>

CSS

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: red;
}

.strike > span:before {
    right: 100%;
}

.strike > span:after {
    left: 100%;
}

Example: http://jsfiddle.net/z8Hnz/

MartinF
  • 5,929
  • 5
  • 40
  • 29
  • Great solution. Instead of `background: red`, if you use `border: 1px solid red` or `border-top: 1px solid red`, the line will also show up in printed output. – Jasen Nov 24 '15 at 02:13
0

You can do it like so (for the background, you can make a 1px image of your color choice):

<h1><span>Some Text</span></h1>

h1 { width: 100%; text-align: center; background: url(pixel.jpg) repeat-x left center; }
h1 span { padding: 0 3px; background-color: #ffffff; }

Edit: Without bg color:

.hr { width: 100%; height: 40px; line-height: 40px; }
.hr span { width: 10%; text-align: center; float: left; margin: 0; display: inline-block; }
.hr .line { width: 45%; height: 100%; background: url(pixel.jpg) repeat-x left center; float: left; }
.hr .line.right { float: right;}

<div class="hr">
<div class="line left"></div>
<span>Some Text</span>
<div class="line right"></div>
</div>

You'll need to adjust percents and whatnot, but it works in general.

Tammy Shipps
  • 865
  • 4
  • 13