2

これらのアイコンをCSSだけで作成しようとしています（白いアイコンを除く）。私が遭遇している問題は、アイコンの名前が幅を超えてテキストを折り返し始めた場合、画像が重なり始め（2番目の要素に見られるように画像が上にシフトされるため）、テキストにシフトさせる必要があることです下向き（3番目の要素に示されているように）。

ここに画像の説明を入力してください

これが私の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開始するには、親タグをに設定する必要がありますdisplay: table。次に、次のプロパティを使用してタグを設定します。

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

vertical-algin：bottomの設定を試みました。およびdisplay：inline; あなたのレーベルのために？

于 2013-01-10T03:20:15.467 に答える