4

HTML

<div class="leave-comment">
  <a href="example-video-8/" rel="bookmark" title="Leave a comment for Example Video 8"><span class="comment-bubble"></span>Leave a comment for Example Video 8!</a>
</div>

CSS

.leave-comment {
background: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
}

.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
float: left;
margin-right: 10px;
  }

これが JS Fiddle です: http://jsfiddle.net/CeZLy/

コメント バブルとテキストの両方をブラック ボックスの中央に配置しようとしています。テキストは常に変化するため、a要素に固定幅を設定することはできません。誰かがこれで私を助けることができますか?

注: わかりにくかったら申し訳ありません。テキストの左側にコメント バブルを配置し、コメント バブルとテキストの両方をブラック ボックスの中央に配置します。

4

3 に答える 3

2

スパンを取り外します。画像を要素の背景として設定しaます。text-align:center;画像の左パディングを使用および追加します。

.leave-comment {
    background: #010101;
    clear: both;
    font-size: 1.4em;
    padding: 20px 0;
    text-align:center;
}

.leave-comment a {
    background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
}

<div class="leave-comment">
    <a href="example-video-8/" rel="bookmark" title="Leave a comment for Example Video 8">Leave a comment for Example Video 8!</a>
</div>

それを確認してください：

http://jsfiddle.net/C9HKr/

于 2013-01-16T23:53:50.740 に答える
1

あなたのコメントから、私はただ省略してfloat: left追加しますtext-align: center

JSFiddle

垂直方向のセンタリングは少し難しいようです。垂直方向に中央に配置し、高さを固定したい場合line-heightは、リンクの を同じ高さに設定できます。

JSFiddleを参照してください

Vertical Centering With CSSには、垂直方向のセンタリングに関する優れたチュートリアルがあり、いくつかの方法を説明し、それぞれの長所と短所を強調しています。

更新：

私はあなたのコメントを読み直しました。たぶん私はあなたを誤解しました。リンクを少し上下に動かしたいだけなら、上下に別のパディングを使用することもできます。

このJSFiddleを参照してください

于 2013-01-16T23:47:41.840 に答える
0 
.leave-comment {
background-color: #010101;
 clear: both;
font-size: 1.4em;
padding: 20px 0;
text-align: center;
}
.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
margin-right: 10px;
position: relative;
top: 7px;
}

さて、あなたは今スパンが必要です。

http://jsfiddle.net/CeZLy/7/の動作中

于 2013-01-16T23:38:37.807 に答える