20

またはに定数（したがって、自動で再利用できない）値を割り当てずに、背景画像をテキストと垂直方向に揃えるのに問題がありheightますline-height。たとえば、a要素, with its text without assigning constant values toline-height orheight`の bg 画像を垂直方向に中央揃えする方法が実際にあるのではないかと思っていました。

ライブ デモはhttp://cssdesk.com/8Jsx2で利用できます。

HTMLは次のとおりです。

<a class="">background-position: center</a>
<a class="contain">background-size: contain</a>
<a class="line-height">Constant line-height</a>

CSS は次のとおりです。

a {
  display: block;
  margin: 10px;
  width: 200px;
  padding-left: 34px;
  font-size: 14px;  

  background: url('http://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Thumbs%20up.png');  
  background-repeat: no-repeat;
  background-position: 5px center;

  border: 1px solid black;
}

/* I don't want to use constant line-height */
.line-height {
    line-height: 24px;
}

/* I don't want to use this, because I want my bg image's size to stay intact */
.contain {
    background-size: contain;   
}
4

3 に答える 3

40

背景を css に合わせて 2 つの単語を使用してみてください。

background-position: left center;

参照: http://www.w3schools.com/cssref/pr_background-position.asp

アップデート：

コメントから別のリンクを追加します。Grant Winney は、これがどのように機能するかについて、はるかに優れたインターフェイスを備えた別のサイトを共有しました。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

于 2013-12-12T20:46:53.060 に答える
2

背景画像は含まれている要素の高さに影響を与えないため、CSSだけではこれが不可能だと思います。背景画像のサイズを検出する必要があり、それにはjavascriptが必要になります。Javascriptで要素の幅と高さを検出するにはimg、背景画像からを作成する必要があります。

Javascriptを使用しdisplay: table、目的の結果を達成するためのソリューションは次のとおりです。

実例： http： //jsbin.com/olozu/9/edit

CSS：

div {
    display: table; 
}

a {
    display: table-cell;
    vertical-align: middle;
    margin: 10px;
    width: 200px;
    padding-left: 34px;
    font-size: 14px;  

    background: url('http://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Thumbs%20up.png');  
    background-repeat: no-repeat;
    background-position: 0 0;
    border: 1px solid black;
}

HTML：

<div><
    <a id="example-a">background-position: center</a>
</div>

JS：

$(function() {

    var imageSrc = $('#example-a')
                 .css('background-image')
                   .replace('url(', '')
                      .replace(')', '')
                      .replace("'", '')
                      .replace('"', '');   

    var image = '<img style="display: none;" src="' + imageSrc + ' />';

    $('div').append(image);

    var width = $('img').width(),
        height = $('img').height(); 

    // Set the height of the containing div to the height of the background image
    $('#example-a').height(height);

});

私は次のソースに基づいて答えました。jQueryで背景画像のサイズを取得するにはどうすればよいですか？

于 2012-11-17T23:55:58.277 に答える
1

背景画像にbackgroundcss を使用すると、常に中央に表示されます。center問題は、テキストをコントロールの中央に配置することです。

em単位を使用して行の高さを指定することを検討しましたか? 垂直方向の中央を配置できるように、ある種の高さを指定する必要があります。

または、を使用したくない場合は、 cssemを試すことができます。display:table-cell

上記の 2 つの例については、http://cssdesk.com/3ZXrHを確認してください。何が起こっているのかをよりよく示すために追加height:10em;しました。

于 2012-11-17T23:42:13.167 に答える