Question

I want to horizontally center a span inside an a-tag. The problem is that I can’t set the height nor the width of the span. My markups is as follows:

<div class="footer">
     <a href="#">
          <span>Show/Hide</span>
     </a>
</div>

And the css:

.footer {position:absolute; bottom:0; width:100%;}
.footer a {display:block; background:orange; text-align:center;}
.footer a span {background:#FFF; font-size:12px; width:100px;}

I’ve tried everything, but think I need some sort of float somewhere, but don’t know. Help are gladly appreciated! 🙂

Answer 1

You can’t set dimensions of display: inline elements.

You can either have both the a and the span have display: block, if you want to explicitly set its width:

.footer {position:absolute; bottom:0; width:100%;}
.footer a {display:block; background:orange;} /* no need to center text, here */
.footer a span {
  display: block; /* give it a box layout */
  margin: 0px auto; /* center it horizontally */
  width:100px; /* give it explicit absolute size */
  text-align: center; /* you might center the content here, though */
  background:#FFF; font-size:12px;}

or just use text-align: center as you are already doing:

.footer {position:absolute; bottom:0; width:100%;}
.footer a {display:block; background:orange; text-align:center;}
.footer a span {background:#FFF; font-size:12px;
  padding: 0px 30px;} /* if you only want some padding, and not a fixed width