Centrage vertical de pseudos éléments

**RolandGautier** · 31/03/2018, 11h22

Bonjour,

J'utilise dans mes formulaires des checkboxes et boutons radio que j'ai trouvé ici : https://www.w3schools.com/ahowto/how...m_checkbox.asp

Dans mon cas précis, cela donne ceci :

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
<!DOCTYPE html>
<html>
<style>
/* The rcntnr */
.rcntnr {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 
/* Hide the browser's default radio button */
.rcntnr input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
 
/* Create a custom radio button */
.rchckmrk {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}
 
/* On mouse-over, add a grey background color */
.rcntnr:hover input ~ .rchckmrk {
    background-color: #ccc;
}
 
/* When the radio button is checked, add a blue background */
.rcntnr input:checked ~ .rchckmrk {
    background-color: #2196F3;
}
 
/* Create the indicator (the dot/circle - hidden when not checked) */
.rchckmrk:after {
    content: "";
    position: absolute;
    display: none;
}
 
/* Show the indicator (dot/circle) when checked */
.rcntnr input:checked ~ .rchckmrk:after {
    display: block;
}
 
/* Style the indicator (dot/circle) */
.rcntnr .rchckmrk:after {
        top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
}
</style>
<body>
 
<h1>Custom Radio Buttons</h1>
<hr>
<label class='rcntnr'>331 533 182 00068 : VEGA INFORMATIQUE, LES BUREAUX DU LAC, 6 ET 7 BATIMENT, 7 AVENUE DE CHAVAILLES, 33520 BRUGES
	<input type='radio' name='radio' ' onChange='radioSirent(33153318200068);'>
	<span class='rchckmrk'></span>
</label>
<hr>
<label class='rcntnr'>331 533 182 00084 (siège) : VEGA INFORMATIQUE, 197 AVENUE DU GENERAL LECLERC, BP 10071, 78221 VIROFLAY CEDEX
	<input type='radio' name='radio' ' onChange='radioSirent(33153318200084);'>
	<span class='rchckmrk'></span>
</label>
<hr>
<label class='rcntnr'>331 533 182 00076 : VEGA INFORMATIQUE, 29 RUE LOUIS DE BROGLIE, 21000 DIJON
	<input type='radio' name='radio' ' onChange='radioSirent(33153318200076);'>
	<span class='rchckmrk'></span>
</label>
<hr>
</body>
</html>

Tout cela fonctionne très bien MAIS quand la taille de la fenetre est réduite (tablette, smartphone, ...) le texte de la "label" passe sur plusieurs lignes...

Ma question est la suivante :
Comment centrer verticalement le bouton radio par rapport au texte (entier, quel que soient le nombre de ligne affichées) de la "label" ?
(sachant qu'un simple changement d'orientation du terminal va modifier le nombre de lignes nécessaire à l'affichage du texte entier, ce qui interdit un positionnement absolu)

J'ai bien essayé Flex :

Code :

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

1
2
display: flex;
align-items: center;

appliqué à "label", mais le "span" semble complètement insensible à "align-items;center;"

Auriez-vous une idée, une piste, pour centrer verticalement ce bouton radio ?

Merci par avance,
Roland

**mathieu** · 31/03/2018, 13h12

pour l'élément ".rchckmrk" vous pouvez essayer avec "top : 35%;".
cela n'est pas complètement centré mais il reste surement une marge a régler quelque part pour que l'alignement soit plus proche du centre.

Invité · 31/03/2018, 13h41

Bonjour,

Code css :

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

1
2
3
4
5
6
.rchckmrk {
    position: absolute;
...
    top: 50%; /* on descend de la moitié du conteneur */
    margin-top: -12px; /* on remonte de la moitié du bouton radio (25px / 2) */
}

**RolandGautier** · 31/03/2018, 23h30

Bonsoir Jreaux,

Parfait du premier coup.
Simple et efficace.

Je cherchais très au delà quelque chose de plus complexe.

Merci à toi, je m'endormirai moins idiot ce soir.

**NoSmoking** · 03/04/2018, 14h46

Bonjour,
une autre technique, parmi encore d'autres, consiste à translater l'élément de -50%, on le remonte donc, après l'avoir positionné en top:50%, ce qui évite de préciser sa hauteur en pixel.

Code :

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

1
2
3
4
5
.rchckmrk {
    position: absolute;
    top: 50%;                    /* (1) */
    transform: translateY(-50%); /* (2) */
}

(1) : les 50% sont relatif à la hauteur du parent positionné de l'élément.
(2) : les 50% sont relatif à la hauteur de l'élément.

**RolandGautier** · 03/04/2018, 16h32

Bonjour NoSmoking (donc jean baskets ???

,

Effectivement, c'est également une solution élégante.
Pour l'instant, je gère la taille de l'élément concerné, mais je garde l'idée en tête.

Merci à toi pour cette précision constructive.
Roland

Centrage vertical de pseudos éléments

Centrer un élément en CSS

Discussions similaires

Partager

Partager