Aligner du texte à côté d'images

**aertys** · 16/09/2015, 11h54

bonjour,
mon souci est que je n'arrive pas à aligner du texte à côté d'images.
j'ai tout de même essayé plusieurs techniques (mettre des éléments en flottement ...) mais rien ne marche.
code html :

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
<!DOCTYPE html>
	<html>
		<head>
			  <link href="css/g.css" rel="stylesheet" type="text/css" /> <!--  nom de notre css (que l'on créera juste après -->
			  <script src="js/search_open.js" type="text/javascript"></script> <!--  nom de notre fichier javascript (que l'on créera juste après -->
		</head>
		<body>
			<section>
			 <figure class="line1" onclick="etat_si()">
				<img src="img/Mon-Etat-du-SI.png" alt="" />
				<figcaption></figcaption>
				<p><span class="blue">Mon etat</span> du SI</p>
			 </figure>
			 <figure class="line1" onclick="kiss_d()">
				<img src="img/KISS_Demand_Logo_Naked_detoure.png" alt="" />
				<figcaption></figcaption>
				<p class="blue">Demander</p><br><p>une Information</p>
			 </figure>
			<br />
			 <figure class="line2" onclick="p_u_si ()">
				<img src="img/Portail_des_Utilisateurs_du_SI.png" alt="" />
				<figcaption></figcaption>
				<p class="blue">Mon Portail</p><br><p>des Utilisateurs du SI</p>
			 </figure>
			 <figure class="line2" onclick="kiss_i()">
				<img src="img/KISS_Incident_Logo_Naked_detoure.png" alt="" />
				<figcaption></figcaption>
				<p class="blue">Signaler</p><br><p>un Incident</p>
			</figure>
			<br>
			 <article class="line3">
			   	 <img src="img/recherche.gif" alt="" />
				 <input name="txtSearch" placeholder="Rechercher" type="text" size="14" maxlength="30" />
				 <div>
				 	<input type="submit" value="OK" id="search" name="search" onclick="search()" />
				 </div>
			 </article>
			 </section>
		</body>
	</html>

code CSS :

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
17
18
19
20
21
22
p {
	float: left;
}
.line1,.line2,.line3,p,figure,img {
	display: inline-block;
}
.blue {
	color: blue;
}
.line3 {
	text-align: center;
	position: relative;
	left: 200px;
	margin: 0 auto; 
	border: 2px solid black;
	border-radius: 2px;
}
section {
	width: 800px;
	height: 200px:
	background: url ("img/Fond_Widget2.png") no-repeat;	
}

**nef1912** · 16/09/2015, 19h17

Salut !

As-tu essayé de mettre ton image dans le paragraphe? Et de jouer avec vertical-align sur l'image par exemple.

Comme ça :

Code :

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

1
2
 
<p><img src="img/Mon-Etat-du-SI.png" alt="superAlt" /><span class="blue">Mon etat</span> du SI</p>

CSS :

Code :

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

1
2
3
4
 
img{
vertical-align: middle;
}

**Muchos** · 16/09/2015, 23h38

Bien vu @nef1912! En poursuivant dans cette voie et en gardant la structure de base (dont je doute qu'elle soit pertinente pour —visiblement— un menu):

Code html :

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

1
2
3
4
<figure>
  <img src="/images/foo.jpg" alt="" />
  <figcaption>foo</figcaption>
</figure>

Code css :

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

1
2
3
4
5
6
img {
  vertical-align: middle;
}
figcaption {
  display: inline;
}

Aligner du texte à côté d'images

Positionnement en CSS

Discussions similaires

Partager

Partager