aleksmiller/Centered_header.md

## Centered_header.md

      
    Raw
  

              Centered_header.md
            
          
    Centered header with left/right background

Demo: http://jsfiddle.net/htmlreligion/wo0jn7e3/

  
## heading.css
.heading {text-align: center;}
.heading:before,
.heading:after {content: "~";display: inline-block;vertical-align: middle;}
.heading:before {margin-right: 10px;}
.heading:after {margin-left: 10px;}

## heading.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="heading.css">
  <title></title>
</head>
<body>
  <div class="heading">Title</div>
</body>
</html>

## heading.sass
.heading
  text-align: center
  &:before,
  &:after
    content: "~"
    display: inline-block
    vertical-align: middle
  &:before
    margin-right: 10px
  &:after
    margin-left: 10px
	.heading {text-align: center;}
	.heading:before,
	.heading:after {content: "~";display: inline-block;vertical-align: middle;}
	.heading:before {margin-right: 10px;}
	.heading:after {margin-left: 10px;}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="heading.css">
	<title></title>
	</head>
	<body>
	<div class="heading">Title</div>
	</body>
	</html>
	.heading
	text-align: center
	&:before,
	&:after
	content: "~"
	display: inline-block
	vertical-align: middle
	&:before
	margin-right: 10px
	&:after
	margin-left: 10px