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 :
tandis que le CSS est :
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
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>
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.
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
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%; }
Merci d'avance de m'éclairer.
Partager