Centrer des éléments superposés

**krunch** · 08/04/2014, 00h06

Bonjour

J'ai une sorte de tableau avec dans la 1ère colonne une image sur laquelle doit se superposer un texte, le texte et l'image doivent être centrés horizontalement et verticalement (le texte doit être au milieu de l'image).

Apparemment à cause de la superposition il faut un positionnement relative ('cellule' conteneur) + absolute (span).

D'autre part j'ai laissé tomber <table> (ou alors ça ferait une div dans une <td>) et opté pour des div en display:inline, mais je ne sais pas si c'est une bonne idée ...

Avec les div j'arrive à centrer horizontalement mais pas verticalement. Le vertical-align est sans effet, probablement à cause du positionnement absolute.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div>
	<div style="position:relative; display:inline; text-align:center;">
		<img src=...>
		<span style="position:absolute; left:0; width:100%;">TEXTE</span>
	</div>
	<div style="display: inline;">cellule suivante</div>
</div>
...

Comment feriez vous ça ?
Faut-il opter pour une structure <table> ??
Faut-il remplacer le <span> par une <div> ???

Merci de votre aide

**krunch** · 08/04/2014, 15h15

Rectification : cette solution superpose la cellule suivante, on ne peut pas la repositionner ... quel enfer !
------------------------------------------------------------------------------------------------------------------------

Bon si ça intéresse quelqu'un j'ai trouvé une solution en revenant à une <table>, ce qui permet d'appliquer directement un vertical-align:middle, il faut alors mettre la <td> et le <span> en position:absolute.

Par contre il faut un line-height fixe, ce qui implique de connaître la hauteur de l'image :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
table td {
	position: absolute;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;
}
 
table td span {
	position: absolute;
	left: 0;
	width: 100%;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<table>
	<tr><td><img src=.../><span>TEXTE</span></td></tr>
</table>

**NoSmoking** · 08/04/2014, 21h47

Bonjour,
la lecture de cette discussion devrait t'intéresser http://www.developpez.net/forums/d14...ge-mozilla-ie/

**Candygirl** · 08/04/2014, 23h03

Hello,

Ton image a-t-elle vraiment sa raison d'être dans une balise img ou peut-elle trouver sa place en image de fond ?
Peut-on avoir une image/schéma du résultat final souhaité ?

**krunch** · 09/04/2014, 10h47

Bonjour

On m'a effectivement aiguillé sur des divs avec images en background, la solution de Candygirl.
Ça fonctionne, mais j'aurais aimé pouvoir contrôler l'opacité de l'image (pour l'estomper quand le texte est affiché) ce qui n'est pas possible avec cette solution.

Sinon la discussion de NoSmoking est effectivement très proche ...
- dans tout mes messages il y a des ID multiples qu'il faut remplacer par des class
- dans un tableau il semble que modifier la position d'une TD soit une mauvaise idée
- enfin avec les divs il y a un truc bizarre avec les webkit uniquement : dans la configuration suivante l'élément #in passe à la ligne suivante alors qu'il ne devrait pas

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
        #container {
                position:relative;
                display:inline-block;
        }
        #in {
                position:absolute;
        }
</style>
 
<div id="container">
	<img src="...">
	<span id="in">truc</span>
</div>

Bref j’essaierai encore un peu d'obtenir une image indépendante du texte (dans une balise), mais là j'en ai super marre ...
Merci pour vos réponses.

**NoSmoking** · 09/04/2014, 20h26

Je te fourni une base de travail

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
.conteneur{
  position:relative;
  display:inline-block;
  line-height:90px; /* hauteur image pour centrage vertical */
/*  width:216px;      /* largeur image pas nécessaire si inline-block */
  text-align:center;
}
.conteneur span{
  color:#00F;
  font-size:1.5em;
  font-weight:700;
  dislay:block;
  position:absolute;
  left:0;
  top:0;
  right:0;
}
</style>
</head>
<body>
  <div class="conteneur">
    <img src="http://www.developpez.net/template/images/logo.png" alt="">
    <span>Texte</span>
  </div>
  <div class="conteneur">
    <img src="http://www.developpez.net/template/images/logo.png" alt="">
    <span>Texte</span>
  </div>
</body>
</html>

**krunch** · 10/04/2014, 10h50

Super ça marche au poil !
L'astuce était donc d'ajouter les left/top/right dans le span sans quoi il se balade différemment selon les navigateurs ...

Merci NoSmoking tu es mon sauveur.

**NoSmoking** · 10/04/2014, 18h10

Ce qui manquait dans ton CSS est effectivement le recalage à gauche puis l'affectation d'une largeur 100%.
Le fait de mettre un left:0 et right:0 force l'élément à faire 100% du conteneur et à ne pas sortir de celui ci si par exemple il à un padding.

Centrer des éléments superposés

Centrer un élément en CSS

Discussions similaires

Partager

Partager