How do I horizontally center a span element inside a div
Another option would be to give the span display: table;
and center it via margin: 0 auto;
span {
display: table;
margin: 0 auto;
}
<div style="text-align:center">
<span>Short text</span><br />
<span>This is long text</span>
</div>
One option is to give the <a>
a display of inline-block
and then apply text-align: center;
on the containing block (remove the float as well):
div {
background: red;
overflow: hidden;
text-align: center;
}
span a {
background: #222;
color: #fff;
display: inline-block;
/* float:left; remove */
margin: 10px 10px 0 0;
padding: 5px 10px
}
http://jsfiddle.net/Adrift/cePe3/