Comment centrer verticalement mon image?

Question

J'ai une page ici - http://click2recycle.ca/. Si vous regardez la section sous le titre «RAMASSAGE GRATUIT ET RECYCLAGE DE GRANDES QUANTITÉS D'ÉLECTRONIQUE», il y a une photo d'un camion. Il est centré verticalement au milieu des images à sa gauche et à sa droite.

J'ai aussi une page ici - http://vmmed.com/service/?page_id=7. Si vous regardez la section sous le titre "NOS ACCRÉDITATIONS ET AFFILIATIONS", vous verrez un logo pour une organisation appelée CAR (le logo du milieu). Il n'est pas centré verticalement au milieu des images à gauche et à droite malgré mes meilleurs efforts.

J'ai comparé le CSS en utilisant la fonction Inspect Element de Chrome, mais je n'arrive pas à trouver la différence.

Des pensées?

Answer 1

Beaucoup de gens commentent des correctifs, mais je pense que la question originale demande POURQUOI les deux sont différents. J'ai trouvé la même chose et j'étais intéressé (en utilisant Chrome) pourquoi les deux se comportaient différemment. Tout d'abord, voici les différences (en utilisant Chrome) - J'ai ajouté une bordure rouge pour montrer visuellement qu'ils ne sont pas alignés.

http://vmmed.com/service/?page_id=7

et http://click2recycle.ca/

Maintenant, lorsque vous affichez les deux pages dans Firefox, vous voyez:

et

Encore une fois, ces deux provenaient de Firefox et montrent qu'ils sont tous les deux haut-alignés. Alors, quelle est la différence?

C'est quand je remarquai un inline style sur une page (http://click2recycle.ca/) et non pas sur l'autre:

-webkit-box-align: center; 
-webkit-box-pack: center; 

(plus d'infos sur la boîte-align ici: https://developer.mozilla.org/en-US/docs/Web/CSS/box-align)

Et c'est pourquoi les deux sont différents! (Et pourquoi c'est spécifique à Chrome - à cause du préfixe du fournisseur).

Espérons que cela aide!

Answer 2

Il existe plusieurs façons de le faire. Le plus simple est probablement d'ajouter padding-top à son div contenant et l'enlever avec une requête de médias (remarqué qu'il était sensible) à une certaine résolution d'écran.

alternativement, un coup d'oeil à ce example que je l'ai utilisé avec succès à quelques reprises, mais il est le genre de difficile à obtenir tout juste dans tous les navigateurs avec des éléments vides et en utilisant display:inline

Answer 3

ajouter le code CSS

top:30px; 

à l'élément avec XPath:

//*[@id="x-content-band-10"]/div[2] 

(div avec des classes « x-Colum n vc un tiers ")

Answer 4

Cela le fixe et devrait le laisser répondre. Déposez ceci dans le CSS

.center-block { 
margin-top: 2.25em;