Alignement de texte et d'image

Version imprimable

Bonjour,

Tentant de faire un site en Responsive web design, je n'arrive pas à effectuer un alignement vertical et horizontal malgré de multiples lectures.
Mon HTML est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <title>RWD</title>
    <meta name = "viewport" content="width=device-width"/>
    <link rel = "stylesheet" href = "RDW.css">
</head>
 
<body>
 
<div class ="container">
	<div class ="block haut_gauche"> haut gauche </div>
	<div class ="block haut_centre"> <img src="Images/chien.jpg"></div>
	<div class ="block bas"> Mon texte </div>
</div>
 
 
</body>
</html>

tandis que le CSS est :

Code:

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
body
	{
		background:pink ;
		font-size:100%;
	}
 
.container{width:1366px; margin:0 auto;}
.block{float:left;}
.block:after{clear:left;}
 
 
.haut_gauche
	{
		background:blue;
		height:100px;
		width:200px;	/* largeur zone de texte */
		line-height:normal; /* on rétablit le line-height */
		text-align:left; /* ... et l'alignement du texte */
	}
.haut_centre{background:grey;height:100px;width:1166px;}
.bas{background:white;height:300px;width:1366px;}
 
 
img.centre
	{
		vertical-align: 100%;
	}

Je précise que je souhaite aligner "haut gauche" dans le rectangle bleu en haut à gauche et l'image "chien.jpg" dans son rectangle gris.

Merci d'avance de m'éclairer.

Je me réponds à moi-même, venant de trouver pour le texte. il suffit d'ajouter :
Code:

1 2 3 4 5 6 7 8 9 10 div.bloc { width:100px; /* largeur du bloc */ padding:10px; /* aération interne du bloc */ /*border:1px solid #fff; */ vertical-align:middle; display:inline-block; line-height:1.2; /* on rétablit le line-height */ text-align:left; /* ... et l'alignement du texte */ }
dans le CSS et d'appliquer le bloc au texte.
Reste le problème de l'image.

02/03/2016, 15h27
Invité
Bonjour Denis,

La solution la plus simple est souvent la meilleure.

Donc, dès que le code devient trop complexe, c'est souvent qu'une autre solution, plus simple, existe.

En l'occurrence, voir
- display:table; display:table-cell;
- OU display:flex;
N.B. tu parles de "responsive", or ton code comporte des largeurs de blocs en pixels : width:1366px; ...
Ce n'est pas très cohérent.
A la rigueur :
Code:

1 2 width:100%; max-width:1366px;

Voilà une solution HTML5 épurée :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<header id="entete">
  <div class="haut_gauche">
    haut gauche
  </div>
  <div class="haut_centre">
    <img src="Images/chien.jpg" alt="" />
  </div>
</header>
<main id="maintexte">
  <div class="bas">
    Mon texte
  </div>
</main>

Code:

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
body {
  background: pink;
  font-size: 100%;
}
 
#entete,
#maintexte {
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  display: table;
}
 
#entete > div { /* .haut_gauche et .haut_centre */
  display: table-cell;
  text-align: center;  /* alignement horizontal */
  vertical-align: middle;  /* alignement vertical */
  height: 100px;
}
 
.haut_gauche {
  width: 20%;
  background: blue;
}
 
.haut_centre {
  width: 80%;
  background: grey;
}
 
.bas {
  background: white;
  min-height: 300px;
}

Remarque :

Quand tu dois cibler un élément et un seul, il est préférable d'utiliser un id (#xxxxx)
plutôt qu'une class (.xxxxx) qui est utilisée pour plusieurs éléments ayant les même propriétés.

02/03/2016, 16h41
Denis Placé

Bonjour jreaux62 et merci pour ton code et tes conseils avisés.

Effectivement, je parle de "responsive" avec un code qui comporte des largeurs de blocs en pixels. Je compte déplacer seulement quelques éléments dans le cas où le device détecté est un smartphone. Ce terme est il inadapté ?

Citation:

Quand tu dois cibler un élément et un seul, il est préférable d'utiliser un id (#xxxxx)
plutôt qu'une class (.xxxxx) qui est utilisée pour plusieurs éléments ayant les mêmes propriétés.

Techniquement, si on utilise class, ça marche quand même donc quel est l'intérêt d'utiliser id ?
02/03/2016, 18h23
Invité
Je t'invite à lire : FAQ CSS
- À quoi sert l'attribut id en (X)HTML/CSS ?
- Techniques→Positionnement
Et aussi :
- cours CSS
- Glossaire des propriétés CSS
03/03/2016, 09h02
Denis Placé

Merci jreaux62 :)