html - 使文本向下流动而不是向上流动？

Question

我正在尝试仅使用 CSS 制作这些图标(白色图标除外)。我遇到的问题是，如果我的图标名称超过宽度并开始换行，文本开始与图像重叠(因为它向上移动，如第二个元素所示)，我需要让文本做的是移位向下(如第三个元素所示)。

这是我的 html:

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

这是我的 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;
  }

我已经尝试过 vertical-align 但我没有发现任何成功。

Answer 1

代替 bottom:-20px，试试 top:100%

这是一个概念证明:http://jsfiddle.net/eZcRk/