让文字向下流动而不是向上流动？

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/

Answer 2

只需将top的{​​{1}}属性设置为label的高度

div

DEMO

Answer 3

要让vertical-align生效，您需要将父标记设置为display: table。然后使用以下属性设置标记：

display: table-cell;
vertical-align: bottom;

Answer 4

尝试设置vertical-align：bottom;和显示：内联;为你的标签？