[Résolu] Je n'arrive pas à centrer verticalement des images.

Bonjour,
J'ai suivi cet article à la ligne :
https://www.alsacreations.com/tuto/lire/1032-Comment-centrer-verticalement-sur-tous-les-navigateurs-.html mais cela ne fonctionne pas
Je pense que cela est dû au fait que les images se trouvent dans un slider
Je vous donne mes CSS (parent et enfants) au cas où :

#content
{
	margin:0em auto;
	width:100%;
	overflow:hidden;
	position:relative;
	padding-top:0em;
	text-decoration: none;
	height: 100vh;
	background-color: #cab2a3;
}

#slide
{
	/* initialisé en javascript */
	/*position:relative;
	/**/
	/*width:400%;
	/* contient 4 éléments donc 4x100 = 400% */
}

.article
{
	/* initialisé en javascript */
	/*width:25%;
	/* il y a 4 éléments donc 100/4 = 25% */
	/*float:left;
	/**/
}

#imagasiat
{
	bottom: 0;
	position: absolute;
	z-index: 999;
	-webkit-transition: -moz-transform .3s ease-out;
	-moz-transition: -webkit-transform .3s ease-out;
	-o-transition: -o-transform .3s ease-out;
	transition: transform .3s ease-out;
	vertical-align: middle;
}

.imagasiat
{
	height: 100vh;
	float: right;
	top: 0px !important;
	max-width: 100%;
	bottom: 0px!important;
	position: relative;
	z-index: 9999;
	vertical-align:middle!important;
	border: 1vw solid #000000;
	vertical-align: middle;
	-webkit-transition: -moz-transform .3s ease-out;
	-moz-transition: -webkit-transform .3s ease-out;
	-o-transition: -o-transform .3s ease-out;
	transition: transform .3s ease-out;
}

.imagasiat2
{
	max-height: 100vh;
	text-align: center;
	top: 0px !important;
	max-width: 100%;
	bottom: 0px!important;
	position: relative;
	z-index: 9999;
	vertical-align:middle!important;
	border: 1vw solid #000000;
	opacity: 0;
	transition: all 1.5s ease-in-out;
	vertical-align: middle;
}

Merci pour votre aide et bonne journée
P.

Bonjour,
Il manque le Html

Bonjour Hermann,
Merci pour ta réponse. Désolé, c'est un oubli
Voici le HTML :

<div class="article">
	<ul id="textasiat" class="niveau1 textasiat">
		<li><a href="#">Sabrina</a></li>
	</ul>
	<img class="niveau2 imagasiat" src="images/Sabrina.jpg" alt="Sabrina">
</div>

Merci à toi,
P.

PLGPPUR a écrit :
Bonjour Hermann,
Merci pour ta réponse. Désolé, c'est un oubli
Voici le HTML :

<div class="article">
	<ul id="textasiat" class="niveau1 textasiat">
		<li><a href="#">Sabrina</a></li>
	</ul>
	<img class="niveau2 imagasiat" src="images/Sabrina.jpg" alt="Sabrina">
</div>

Merci à toi,
P.

C'est pas clair du tout, ton image fait height: 100vh;

Bonjour Hermann,
Tu as raison, pour le height, il est bien de 100vh
C'est en mode mobile que l'image n'est plus centrée, elle se retrouve à top: 0 (avec un width de 100%)
Désolé de ne pas avoir été plus clair
Merci pour ton aide et bonne journée
P.

Hermann a écrit :
C'est pas clair du tout, ton image fait height: 100vh;

Bonjour Hermann , long time no see, salutations


@PLGPPUR , pour faire suite,
Et puis , ton css nous donne quelques regle pour ces sélecteur :

#content{}
#imagasiat{}
.imagasiat{}
.imagasiat2{}

Mais ton HTML est incomplet rapport aux styles que tu partages et qui posent problèmes, de plus rien en rapport avec ul, son id ou class, qui reste invariablement dans ce contexte de style, un block!.

#content et #slide absent du code, CSS de article commenté et JavaScript incriminé inconnu , ratio et taille images aussi inconnus mais en height:100vh.
En final avec toutes ces inconnues, on se dit , mais c'est quoi qui doit être aligné verticalement à quoi, c'est pas l'image si elle occupe déjà la hauteur de la fenêtre !?! ul alignée sur img , en superposition , ... à coté??

En proposant aux cotés de ta question un jsfiddle, un codepen ou autre editeur en ligne ton code en live et représentatif reproduisant ton soucis, cela t'aiderais à obtenir des réponses bien orientées, voir t'aider à découvrir seul ta solution.

cdt
Modifié par gcyrillus (04 Apr 2023 - 21:31)

reBonjour gcyrillus
Voici le codepen :
https://codepen.io/herde2/pen/WNaeYVZ
J'ai juste retiré le height :100 vh car sinon, l'image est déformée... s'adapte à la hauteur (contrairement à ma page !!!???????) Pourquoi ????
Bonne journée,
P.

Bonjour gcyrillus,
Le codepen montre bien le problème : image non centrée verticalement
Mais je peux en refaire un
Bonne journée et merci^^
P.

Bonjour gcyrillus
Désolé de ne répondre que maintenant mais je n'avais plus d'ordinateur.
Erreur de JS dans mon codepen Pardon !
Je tente d'en faire un nouveau, mais le js n'agit pas. Je suppose que je m'y prends mal
Que faut-il mettre dans la case dédiée ?
Voici le JS provenant de la page :

<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
// les liens doivent être ordonnés
$(function () {
  var listLien = $('#nav a'),
      enCours  = 0,
      oSlide   = $('#slide'),
      lstSlide = oSlide.children(),  // $('#slide div')
      nbrSlide = lstSlide.length;
 
  // affectation dynamique du CSS
  oSlide.css(
    { 'width' [decu]100 *nbrSlide) +'%',
      'position': 'relative'
    });
  lstSlide.each( function(){
    $(this).css(
      { 'width': 100/nbrSlide +'%',
        'float': 'left'
      });
  });
 
  // fct de déplacement commune
  function moveSlide(pos){
    // déplacement conteneur
    oSlide.animate({
        'left': ( -pos *100) +'%'
      }, 'slow');
     // mémorise position en cours
     enCours = pos;
     // affichage ou non des fléches
     $('.gauche')[enCours === 0 ? 'hide' : 'show']('slow');
     $('.droite')[enCours === nbrSlide-1 ? 'hide' : 'show']('slow');
  }
 
  // gestion des clics sur les liens
  listLien.on( 'click', function(){
    // déplace le conteneur à la position de l'ancre
    moveSlide( listLien.index(this));
    // inibe le lien
    return false;
  });
 
  // gestion des clics sur les flèches
  $('.fleche').on('click',function(){
    var inc  = $(this).hasClass('droite') ? 1 : -1,   // incrément suivant cas
        next = enCours + inc;
    // si déplacement autorisé
    if( next > -1 && next < nbrSlide){
      moveSlide( next);
    }
  });
  // uniquement pour l'affichage des fléches
  moveSlide(enCours);
});
</script>

Après, le codepen devrait fonctionner
Merci pour ton aide et bon week-end,
P.

Bonjour gcyrillus,
J'étais passé à côté de cette réponse datant de plus d'un mois
Super, UN GRAND MERCI... TOP !
Bonne journée,
P.

PLGPPUR a écrit :

Le display:grid de ta solution fait que les images se retrouvent à droite.
Le grid est-il obligatoire ?

Le grid simplifie grandement l'alignement en laissant le navigateur faire les calculs de lui-même. L'alignement à droite des images n'est pas forcément du au display, mais aux styles que tu leur appliques ou pas . Dans le codepen repris, ce défaut n'apparait pas mais tu as plusieurs exemples d'affichages que tu appliques via différente class. Tu utilises probablement la mauvaise class.

Je te conseille fortement d'apprendre à te servir de la touche F12 de ton navigateur pour pister les styles appliqués à chaque élément ainsi que d'autres erreur ou message . Cela te permettra de suite de savoir si il y a une erreur (un script, un fichier qui ne se charge pas,..) et quels styles sont appliqués a qui et d'où dans les styles.

Cdt