Deux boutons et texte aligné

**fidbell84** · 02/05/2015, 08h49

Bonjour,

Je voudrais mettre deux boutons et un texte sur la même ligne (une image à gauche et l'autre à droite et le texte en milieu)

voila mon code html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="titreGlob">
	<div class="flotte1">
		 <img src="b-home.png" alt="Nouveau !" />
	</div>
	<div class="titre">
		Prelievo Da Lista
	</div>
	<div class="flotte2">
		<img src="b-return.png" alt="Nouveau !" />
	</div>
</div>

code CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#titreGlob{
	display:inline-block;
	background-color: #4180C5;
 
}
 
#titreGlob .flotte1 {
	float:left;
}
#titreGlob .flotte2 {
	float:right;
}
#titreGlob.titre{
	text-align: center;
}

Invité · 02/05/2015, 09h06

Bonjour,
une solution parmi d'autres :

Code html :

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

1
2
3
4
5
<div id="titreGlob">
	<a href="..."><img class="flotte1" src="b-home.png" alt="b-home" /></a>
	<a href="..."><img class="flotte2" src="b-return.png" alt="b-return" /></a>
	<span class="titre">Prelievo<br />Da Lista</span>
</div>

Code css :

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
#titreGlob{
	background-color: #4180C5;
	text-align: center;
	padding:5px 10px;
}
 
#titreGlob .flotte1 {
	float:left;
}
#titreGlob .flotte2 {
	float:right;
}
#titreGlob .titre {
	font-size: 140%;
	font-weight: bold;
}

**fidbell84** · 02/05/2015, 09h18

Merci pour votre réponse,

je dois que le texte soit sur le même ligne j'ai supprimer </br>
Le problème que les deux images ne sont pas au centre de background.

Code html :

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

<span class="titre">Prelievo Da Lista</span>

Code :

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

1
2
3
4
5
#titreGlob{
	background-color: #4180C5;
	text-align: center;
	padding:25px 15px;
}

**fidbell84** · 02/05/2015, 09h27

J'ai modifié celle ci

je sais pas c'est une meilleur solution ou pas
mais j'ai aboutie à la résultat que je cherche.
mais le problème que le titre n'est pas au centre de background.

Code :

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

1
2
3
4
5
6
#titreGlob{
	background-color: #4180C5;
	text-align: center;
	padding:30px 15px;
	margin-top: -20px;
}

**NoSmoking** · 02/05/2015, 17h11

Bonjour,
même réponse ou presque que celle faite dans cette discussion.

Sans aucun CSS une IMG possède un vertical-align:baseline, donc pour l'aligner au milieu de son conteneur il suffit de lui affecter un vertical-align:middle.

exemple simple pour test

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>IMG vertical-align</title>
<style>
p{
  background:#EFEFEF;
}
img{
  vertical-align:middle;
}
</style>
</head>
<body>
  <p>
    <img src="http://www.developpez.com/images/logos/html5-2.gif">
    Le texte à afficher
    <img src="http://www.developpez.com/images/logos/css3-3.gif">
  </p>
</body>
</html>

**fidbell84** · 03/05/2015, 17h03

Lorsque je mets float: left; pour l'image à gauche
et float: right pour l'image à droite
le text devient en haut et background prend l'espace de texte seulement

**NoSmoking** · 03/05/2015, 19h54

Dés l'instant où tu mets tes images en float celle ci sont sortie partiellement du flux et n'ont plus d'influence sur les dimension de leur conteneur.

Une solution dans ce cas est de mettre une line-height sur le conteneur de la hauteur des images.

Il est également préférable de mettre les éléments flottants avant les éléments qui restent dans le flux pour ne pas avoir de surprise et notamment lors de redimensionnement.

Cela donne

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>IMG vertical-align non nécéssaire</title>
<style>
p{
  background:#EFEFEF;
  line-height:3.75em;
  text-align:center;
}
</style>
</head>
<body>
  <p>
    <img src="http://www.developpez.com/images/logos/html5-2.gif" style="float:left">
    <img src="http://www.developpez.com/images/logos/css3-3.gif"  style="float:right">
    Le texte à afficher
  </p>
</body>
</html>

Deux boutons et texte aligné

CSS

Discussions similaires

Partager

Partager