2

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

在此处输入图像描述

这是我的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，但我没有发现任何成功。

4

4 回答 4

5

而不是bottom:-20px，尝试top:100%

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

于 2013-01-10T03:20:09.370 回答
1

只需将 的top属性设置label为的高度div

.circle > label
{
    top: 128px; 
}

演示

于 2013-01-10T03:27:02.323 回答
0

要开始vertical-align工作，您需要将父标签设置为 have display: table。然后使用以下属性设置标签：

display: table-cell;
vertical-align: bottom;
于 2013-01-10T03:19:39.327 回答
0

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

于 2013-01-10T03:20:15.467 回答