Центрированный заголовок поверх горизонтальной линии на CSS

09.08.2015

<div class="main-container">
    <h1>
      <span id="left">&nbsp;</span>
      <span id="center">Hello&nbsp;World</span>
      <span id="right">&nbsp;</span>
  </h1>
</div>

article, aside, figure, footer, header, hgroup, 
menu, nav, section { 
    display: block; 
}

.main-container {
    margin: 0 auto;
    padding: 0 0 10px 0;
}

h1 { 
    display: table;
}
h1 span { 
    display: table-cell; 
    text-align: center;
}
#left, #right {
    width: 50%; 
    border-bottom: 1px solid black;
}
#center {
    display: inline-block; 
    position: relative; 
    top: 0.5em; 
    padding: 0 0.5em; 
}