web-dev-qa-db-fra.com

Comment aligner verticalement l'image d'arrière-plan avec le texte?

J'ai du mal à aligner verticalement l'image d'arrière-plan avec le texte, sans affecter de valeurs constantes (et donc pas automatiques et réutilisables) à height ou line-height. Je me demandais s'il y avait vraiment un moyen d'aligner verticalement l'image bg au centre de, disons et a element, with its text without assigning constant values toline-height orheight`?

Une démo en direct est disponible ici: http://cssdesk.com/8Jsx2 .

Voici le HTML:

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

Et voici le 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;   
}
cssvertical-alignment
18
TheFooProgrammer

Essayez d'utiliser deux mots pour aligner votre arrière-plan avec css.

background-position: left center;

Référence: http://www.w3schools.com/cssref/pr_background-position.asp

METTRE À JOUR:

Ajout d'un autre lien à partir des commentaires. Grant Winney a partagé un autre site qui a une bien meilleure interface pour savoir comment cela fonctionne.

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

32
JabberwockyDecompiler

Je ne pense pas que cela soit possible avec CSS seul car les images d'arrière-plan n'affectent pas la hauteur de leur élément conteneur. Vous devrez détecter la taille de l'image d'arrière-plan et cela nécessitera du javascript. La détection de la largeur et de la hauteur d'un élément en Javascript implique la création d'un img à partir de l'image d'arrière-plan.

Voici une solution qui utilise Javascript et display: table pour obtenir le résultat souhaité:

Exemple de travail: 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);

});

J'ai basé ma réponse sur la source suivante Comment puis-je obtenir la taille de l'image d'arrière-plan dans jQuery?

2
littledynamo

En utilisant le background css à center l'image d'arrière-plan, vous l'aurez toujours centrée. Le problème est l'alignement du texte au milieu du contrôle.

Avez-vous envisagé d'utiliser les unités em pour spécifier la hauteur de ligne? Vous devrez spécifier une sorte de hauteur pour permettre au centre vertical d'avoir lieu.

Si vous ne souhaitez pas utiliser em, vous pouvez également essayer display:table-cell css.

Vérifiez - http://cssdesk.com/3ZXrH - pour les deux exemples ci-dessus. J'ai ajouté height:10em; pour mieux montrer ce qui se passe.

1
Kami