Question

I’m trying to make these icons with just CSS (except for the white icon). The problem I’m running into is that if my icon’s name exceeds the width and starts wrapping the text starts overlapping the image (as it is shifted upwards, as seen on the second element), what I need to have the text do is shift downwards (as shown on the third element).

Here is my html:

 <div class=circle><label>Manage Queries</label></div>

And here is my CSS:

.circle
 {
  float:left;
  position:relative;
  border-radius: 50%;
  width: 128px;
  height: 128px; 
  background: #C70C11 url('myimage.png') no-repeat center center;
  }

  .circle > label
  {
    font-family:arial;
    position: absolute; 
    bottom: -20px; 
    text-align:center;
    width:inherit;
  }

I have tried vertical-align but I haven’t found any success with it.

Answer 1

Instead of bottom:-20px, try top:100%

Here is a proof of concept: http://jsfiddle.net/eZcRk/