Here's a little challenge for you: I have an HTML title with borders on the top and bottom. Can I center it so that the borders are the same width as the element? Currently, I'm forced to use a workaround involving setting the width, which is far from ideal.
Take a look at this demo for reference: http://codepen.io/anon/pen/KIJAh
HTML
<div>
<h3 class="removeMe">All your base</h3>
</div>
CSS
div {
padding-top: 30px;
height: 100px;
width: 300px;
margin: 0 auto;
background-color: Moccasin;
}
h3 {
text-align: center;
display: block;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin: 0 auto;
}
.removeMe {
width:160px;
}