Aligner une image et un texte

**etiennegaloup** · 17/11/2011, 22h09

Bonjour,

je débute en css et j'éprouve quelques difficultés pour mettre en place en en-tête de ma page une image suivi d'un titre h1 centré verticalement par rapport à l'image. J'aimerais que le titre soit légèrement décalé de l'image et pas collé tout contre.
J'ai lu plusieurs solutions pour faire ce que je souhaite faire.
La première sur le site : Aligner une image à gauche du texte
Elle consiste à appliquer à le style suivant à l'image et à définir le texte de la même taille que l'image.

Code html :

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

1
2
3
<p class="flotte">
 <img src="images/new.png" alt="Nouveau !" />
</p>

Code css :

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

1
2
3
.flotte {
float:left;
}

Comment puis-je faire pour que la taille du texte soit automatiquement la même que celle de l'image ?

L'autre solution a été proposé par Bisûnûrs sur ce forum:
Aligner texte et image

Hors ici, le texte n'est pas mis en forme. Pour ma part, je souhaite utiliser une balise h1.
En appliquant cette solution avec mon titre h1, ce dernier est mis à la ligne.

Comment puis-je faire ?

Merci d'avance
Etienne

**NoSmoking** · 17/11/2011, 22h33

Bonsoir,
il te faut mettre ton image dans la balise H1 et appliquer à celle ci une margin-right en plus du vertical-alignexemple :

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
h1 img {
  vertical-align : middle;
  margin-right : 10px;
}
</style>
</head>
<body>
<h1><img src="http://www.developpez.net/template/images/logo.gif">www.developpez.net</h1>
</body>
</html>

Le retour à la ligne s'explique par le fait que les éléments H1 sont des éléments de type block

**etiennegaloup** · 17/11/2011, 23h21

Bonsoir,

merci beaucoup pour la réponse.
Ca marche super bien. C'était si simple au final.

Comment puis-je faire pour appliquer le style suivant au texte du titre h1 ?

Code css :

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

1
2
3
4
5
6
7
8
9
10
.TexteEnTete
{
    font-size: 200%;
    font-weight: normal;
    font-style: italic;
    text-align: right;
    padding-right: 2%;
    background: #008689;
    color: #FFFFFF;
}

Merci d'avance
Etienne

**NoSmoking** · 18/11/2011, 22h29

Code :

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

<h1 class="TexteEnTete"><img src="http://www.developpez.net/template/images/logo.gif">www.developpez.net</h1>

http://css.developpez.com/faq/?page=...html#css_class

**etiennegaloup** · 19/11/2011, 00h53

Bonjour,

merci pour la réponse.
J'avais effectivement procédé ainsi.
Le hic, c'est que j'aimerais que mon texte soit aligné à droite et que l'image reste à gauche. Dans ce cas, je ne peux pas définir l'attribut text-align à la valeur right, sinon l'image ne reste pas à gauche.
Il faudrait donc que je puisse juste appliquer la class juste au texte.

Je ne sais pas trop comment faire. En utilisant un span peut-être ? Ou en englobant pas l'image dans la balise h1 ? Je ne sais pas trop à dire vrai.

Merci d'avance pour votre aide.
Etienne

**NoSmoking** · 19/11/2011, 08h27

je vois au moins 2 méthodes
- mettre ton image en backgroud
- mettre l'ensemble dans une DIV avec l'image en flottant, un peu comme tu l'avais approché au départ

exemple avec les 2 méthodes:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
/* methode #1 */
.TexteEnTete{
  color: #FFFFFF;
  font-size: 200%;
  font-weight: normal;
  font-style: italic;
 
  text-align: right;
  padding-right: 2%;
 
  vertical-align : middle;
  line-height : 90px;
 
  background: #008689;
  background-image : url(http://www.developpez.net/template/images/logo.gif);
  background-repeat : no-repeat;
}
/* methode #2 */
.autreEnTete{
  color: #FFFFFF;
  font-size: 200%;
  font-weight: normal;
  font-style: italic;
 
  text-align: right;
  padding-right: 2%;
 
  vertical-align : middle;
  line-height : 90px;
 
  background: #008689;
}
#bandeau img {
  float : left;
}
 
</style>
</head>
<body>
  <h1 class="TexteEnTete">www.developpez.net</h1>
  <div id="bandeau">
    <img src="http://www.developpez.net/template/images/logo.gif">
    <h1 class="autreEnTete">www.developpez.net</h1>
  </div>
</body>
</html>

la 2éme méthode te permettant de mettre un lien éventuelle sur l'image

Aligner une image et un texte

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager