Aligner verticalement un texte

**Mohand.B** · 21/02/2019, 16h39

Bonjour,

Je voudrais aligner verticalement mon texte au milieu mais je n'y arrive pas. J'ai tenté d'utiliser la balise vertical-align:middle mais rien n'y fait.

Je vous partage mon code ci-dessous :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html>
	<head>
 
		<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
 
		<title>zzz</title>
 
	</head>
	<body>
 
		<section class="intro">
 
			<article>
				<p>Maîtrise Active Directory</p>
    		<svg width="120" height="120" viewBox="0 0 120 120">
		<text x="40" y="65" fill="white" font-size="150%" font-weight="bolder">60%</text>
        <circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12"  />
        <circle cx="60" cy="60" r="54" fill="none" stroke="#1B7AB9" stroke-width="12" stroke-dasharray="339.292" stroke-dashoffset="135.717"  /> 
			</svg>
			</article>
 
			<article>
			<p>Monter un serveur linux et Windows et géré sa sécurité </p>
			<svg width="120" height="120" viewBox="0 0 120 120">
		<text x="35" y="65" fill="white" font-size="150%" font-weight="bolder">100%</text>
        <circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
        <circle cx="60" cy="60" r="54" fill="none" stroke="green" stroke-width="12" stroke-dasharray="339.292" stroke-dashoffset="0"  /> 
			</svg>
			</article>
 
			<article>
				<p>Configurer le système informatique d'une entreprise type PME </p>
			<svg width="120" height="120" viewBox="0 0 120 120">
		<text x="40" y="65" fill="white" font-size="150%" font-weight="bolder">90%</text>
        <circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
        <circle cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" stroke-dasharray="339.292" stroke-dashoffset="33.9292"  /> 
			</svg>
			</article>
 
		</section>
 
		<section class="skills">
 
			<article class="cyberskills">
			<h2><i class="fas fa-shield-alt"></i> Compétences Cybersécurité</h2>
 
				<ul>
					<li>Maîtrise de l'architecture informatique</li>
					<li>Gestion des risques</li>
					<li>Capacité analytique</li>
					<li>Chiffrement des données</li>
					<li>Création de firewall</li>
					<li>Contrôle de la sécurité</li>
					<li>Compétences en Pentest</li>
				</ul>
			</article>
 
			<article class="logiciels">
					<h2><i class="fab fa-accusoft"></i> Logiciels</h2>
 
 
			</article>
 
		</section>
 
		<section class="exp">
			<h2><i class="fas fa-suitcase"></i> Expériences professionnelles</h2>
			<ul>
			<li>
				<h4>Service Civique en Protection de l'environnement</h4>
				<h5>Association Unis-Cite</h5> 
				<p><i class="fas fa-map-marker-alt"></i> Marseille</p>
			</li>
 
			<li>
				<h4>Horticulteur Stagiaire</h4>
				<h5>Jardinerie Févriero</h5> 
				<p><i class="fas fa-map-marker-alt"></i> Marseille</p>
			</li>
 
			<li>
				<h4>Horticulteur Stagiaire</h4>
				<h5>Jardin Botanique du Parc Borély</h5> 
				<p><i class="fas fa-map-marker-alt"></i> Marseille</p>
			</li>
 
			<li>
				<h4>Vendeur Polyvalent en Prêt à Porter</h4>
				<h5>Primark</h5> 
				<p><i class="fas fa-map-marker-alt"></i> Marseille</p>
			</li>
 
			<li>
				<h4>Employé Polyvalent de Libre Service</h4>
				<h5>Super U</h5> 
				<p><i class="fas fa-map-marker-alt"></i> Marseille 5e</p>
			</li>
 
			<li>
				<h4>Vendeur Polyvalent en Prêt à Porter</h4>
				<h5>UNIQLO</h5> 
				<p><i class="fas fa-map-marker-alt"></i> LTDP Marseille</p>
			</li>
 
			<li>
				<h4>Vendeur Chocolaterie</h4>
				<h5>Chocolatier Olivier</h5>
				<p><i class="fas fa-map-marker-alt"></i> Toulouse</p>
			</li>
 
			<li>
				<h4>Vacataire Service Technique Mairie</h4>
				<h5>11 et 12e arrondissement</h5> 
				<p><i class="fas fa-map-marker-alt"></i> Marseille</p>
			</li>
			</ul>
 
		</section>
 
	</body>
 
</html>

Code CSS :

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

1
2
3
4
5
.skills .cyberskills ul li {
	padding: 3%;
	border: 0.5px solid white;
	vertical-align: middle;
}

Nom : gQYeTYmRQuWXvKC9xyKmug.png
Affichages : 166
Taille : 137,9 Ko

Invité · 21/02/2019, 16h59

Bonjour,

le bout de CSS est insuffisant pour reproduire le design voulu.

A priori, ajoute juste :

Code css :

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

	display:table-cell;

Autre solution :

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
.skills .cyberskills ul {
	display:flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.skills .cyberskills ul li {
  flex:1 1 50%;
  width:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border: 0.5px solid white;
  padding: 3%;
}

**Mohand.B** · 21/02/2019, 17h14

Merci pour ta réponse.

La première solution ne fonctionne pas mais j'ai essayé ta seconde solution et ça fonctionne ! Et le rendu et même plus appréciable.

Mon bloc ul était en grid, avec deux colonnes du coup mon 7ème li rentrait dans le 7e espace de la grille. Avec ta solution il occupe le 7e et le 8e espace de la grille, c'est impeccable, en plus de remédier au problème que je rencontrais.

Le code de départ pour le bloc .cyberskills était :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
.skills .cyberskills ul {
	display: grid;	
grid-template-columns: repeat(2, 1fr); grid-gap: 10px;
}
 
.skills .cyberskills ul li {
	padding: 3%;
	border: 0.5px solid white;
	vertical-align: middle;
}

Aligner verticalement un texte

Positionnement en CSS

Discussions similaires

Partager

Partager