Placement d'une image.

**Vaca38** · 05/09/2019, 10h55

Bonjour à toutes et à tous,

je n'arrive pas à placer une image à droite et centrée verticalement. J'ai essayé object-position, float et j'en passe, et rien à faire.

De plus, pourriez vous me dire quand doit-on utiliser id et quand doit-on utiliser class. Merci.

Merci pour votre aide. Voici mes codes :

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
<html>
 
<head>
		<meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="essai_1.css">
		<title>CV Denis</title>
</head>
 
<body>
        <div class="liseret">
        </div>
 
 
        <div  id = "haut">
                <div class="gauche">
                    <p align = center> Denis DURAND </p>
                    <p align = center> Enseignant en math&eacutematiques et sciences physiques en cours particuliers <br> et enseignant &agrave l'Universit&eacute.</p>
                </div>
                <div >
                    <img class="obj" src="MINIATURE.jpg" alt="Ma photo.">
                </div>
        </div>
</body>

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.liseret
{   
        display :flex;
        float: left;
	    width:100px;
        min-height: 100vh; /*vh = 1/100 de la fen�tre du navigateur web*/
        background-color: #88EDEB;
        padding : 0;
        margin : 0;
}
 
#haut
{
    display:flex;
}
 
 
body
{
    background-color:#CFEBE8;
}
 
@font-face
{
/*D�finition d'une nouvelle police nomm�e Amble-Light.ttf*/
font-family : 'Amble-Italic';
src : url('Amble-Italic.ttf') ;
}
 
 
img
{
    border : 10px red groove;
}
 
.obj
{
    object-position : right center;
}

Invité · 05/09/2019, 13h55

Bonjour,

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="entete">
  <div>
    <h2>Denis DURAND</h2>
    <p>Enseignant en math&eacutematiques et sciences physiques en cours particuliers <br> et enseignant &agrave l'Universit&eacute.</p>
  </div>
  <figure>
    <img src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1487190201" alt="Ma photo.">
  </figure>
</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
17
#entete {
  display:flex;
  align-items:center;
  width:100%;
}
#entete div {
  flex:1 1 auto;
}
#entete figure {
  flex:0 0 auto;
}
#entete h2, #entete p {
  text-align:center;
}
#entete img {
  border:10px red groove;
}

Placement d'une image.

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager