我試圖用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
,但我還沒有發現任何與它的成功。
+1當然'100%' – Musa