[Résolu] Centrage vertical

Bonjour

Pour la N+1ème fois, c'est le problème du centrage d'une image dans une div
voir http://paralletes.free.fr/header2.html

C'est fait sous la forme de deux divs, l'une avec position:absolute et l'autre relative.
La raison pour laquelle ce sont de "vraies images" et pas des background-image c'est que
1) pour la première div, l'image étant en width:100% il faut que le hauteur s'ajuste pour que l'image soit complète
2) pour la deuxième, je veux mettre un évènement "onclick" sur l'image, et pas sur toute la div.

Le CSS qui ne marche pas:

            #div1 {
                position:relative;
                width:80%;
                margin:auto;
            }
            #div1 > img {
                width:100%;               /* provoque le dimensionnement vertical de div1 */
            }
            #div2 {
                position:absolute;
                display : table-cell;
                vertical-align : middle;
                text-align:center;
                width:100%;
                height:100%;
                top:0;
                left:0;
                border:2px solid red;     /* pour visualiser div2 */
            }

Au secours! à mon âge, ce genre de chose me précipite un peu plus vite vers la tombe...
Modifié par PapyJP (15 May 2015 - 15:19)

Bonjour,

Pourquoi avoir inséré la 2è image dans un div ? Ne se suffisait-elle pas à elle-même ?
Autre question : quelle est la compatibilité souhaitée ? (la réponse "flexbox" arrive avec ses grands sabots )

EDIT : j'ai tenté ça : http://codepen.io/raphaelgoetter/pen/PqNrVR?editors=110
Modifié par Raphael (15 May 2015 - 16:32)

Raphael a écrit :
Bonjour,

Pourquoi avoir inséré la 2è image dans un div ? Ne se suffisait-elle pas à elle-même ?
Autre question : quelle est la compatibilité souhaitée ? (la réponse "flexbox" arrive avec ses grands sabots )

EDIT : j'ai tenté ça : http://codepen.io/raphaelgoetter/pen/PqNrVR?editors=110

Merci de ta réponse, mais ça ne correspond pas à mes besoins. C'est en effet ce que j'ai en ce moment et que je veux modifier.

Si tu mets une image en background-size: cover;, l'image "couvre" la surface de la div mais la div ne se redimensionne pas pour que toute l'image soit visible. Si au lieu de width:80%; tu passe à width:90%; l'image se déforme, voire disparaît, car le changement de largeur n'a pas d'effet sur la hauteur.Le CSS ne possédant pas -- à ma connaissance -- le concept de proportion entre hauteur et largeur le seul moyen que je connaisse consiste à mettre une image en width:100%; et laisser la hauteur de la div suivre la taille de l'image.

Pour des raisons de compatibilité avec les navigateurs de mes utilisateurs, je ne tiens pas à utiliser le flex.
Je veux bien mettre l'image intérieure sans div autour, en la stylant correctement, mais je la veux centrée sur la div extérieure. Je ne peux pas la mettre en background parce que je veux mettre un "onclick" sur cette image, pas sur la div.

Raphael a écrit :
Tu peux rafraîchir le Codepen ?

Pour que ceux qui suivent voient ce dont on parle, je met ton CSS ici:

div {
  	position: relative;
	
	/* largeur */
	width: 80%;	
	
	/* */ 
	border: 2px solid hotpink;
}
img:first-child {
	width: 100%;
	height: auto;
	display: block;
}
img + img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -49px;
	margin-left: -101px;
}

et le HTML

<div>
	<img src="/background_2.png" alt="">
	<img src="/logo.png" alt="" width="203" height="97">
</div>

Effectivement, c'est une solution qui prend en compte les dimensions réelles de logo.png. Il faut la remanier si on change l'image mais ça fonctionne.
Dans ma candeur, je pensais que si on avait passé autant de temps et d'efforts à définir et implémenter CSS3, ce genre de chose basique y serait incluse de façon indépendante de la taille de l'image...

Bonjour,

tu peut eventuellement utiliser background-size et un pseudo element avec un padding vertical exprimé en pourcentage.
Ce pseudo element te servira à conserver le ratio de ta boite et à centrer verticalement le logo :

	div {
	  background: url(http://lorempixel.com/740/135/abstract) red no-repeat;
	  background-size: 100% auto;
	  text-align: center;
	}
	
	div:before {
	  content: '';
	  padding-top: 18.28%;
	  display: inline-block;
	}
	
	div:before,
	div img {
	  vertical-align: middle;
	}

<div>
  <img src="http://paralletes.free.fr/tests/logo.png" />
</div>

http://codepen.io/gc-nomade/pen/EjKqmZ

En conservant ta structure et ta logique de width et un positionnement pour l'image, mais l'autre :

<div id="div1"><img src="http://paralletes.free.fr//tests/background_2.png" alt="" />
  <div id="div2"><img src="http://paralletes.free.fr//tests/logo.png" alt="" /></div>
</div>

#div1,
#div2 {
  position: relative;
}

#div1>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#div2 {
  text-align: center;
}

#div2:before {
  content: '';
  padding-top: 18.28%;
  display: inline-block;
}

#div2:before,
img {
  vertical-align: middle;
}

http://codepen.io/gc-nomade/pen/OVNKxd

l'idée sur les deux est de garder le ratio hauteur / largeur grâce a un élément (pseudo ou inséré) dimensionné avec un padding vertical exprimé en pourcentage.
margin et padding verticaux en pourcentage prennent la largeur du parent en référence de calcul.
: http://www.w3.org/TR/CSS2/box.html#margin-properties
http://www.w3.org/TR/CSS2/box.html#padding-properties

W3C-padding-margin-properties-top-bottom a écrit :

Percentages: refer to width of containing block

Modifié par gc-nomade (15 May 2015 - 17:42)

Wahaouh!!

Voilà une solution qu'elle est Zubtile!

J'espère qu'elle est supportée sans problème par tous les navigateurs à la mode, car ça ressemble beaucoup à de l'utilisation d'effets de bord en cascade, c'est plus du CSS, c'est du CSE (Cascading Side Effects)

En tout cas merci pour le truc et surtout pour le raisonnement.
Je plains le malheureux qui devra faire la maintenance quand j'aurai quitté ce bas monde...

si tu fais tomber le pseudo pour un span, ça passera même dans IE5 on est sur du padding, width, inline-block et vertical-align , que du css de base

PapyJP a écrit :

Dans ma candeur, je pensais que si on avait passé autant de temps et d'efforts à définir et implémenter CSS3, ce genre de chose basique y serait incluse de façon indépendante de la taille de l'image...

Certes, mais tu m'as demandé une solution qui fonctionnait sur les anciens navigateurs... or les anciens navigateurs sont loins d'être friands de CSS3

PapyJP a écrit :
Hmm!
gc-nomade, peux tu regarder http://paralletes.free.fr/tests/header3.html et me dire où je me suis gouré?

tu as oublié le # identifiant le non de ton id :

              #pageRibbon:before,
              #pageRibbon img {
                vertical-align: middle;
              }

gc-nomade a écrit :

tu as oublié le # identifiant le non de ton id :

              #pageRibbon:before,
              #pageRibbon img {
                vertical-align: middle;
              }

Merci beaucoup, c'est le genre de c... qui crève les yeux et qu'on ne voit pas!
Bon week-end