Centrage vertical d'un texte

**fifidibosco** · 29/07/2024, 15h29

.
Bonjour à tous,

j'ai commencé un site dont l’accueil est un diaporama.
Le diaporama fonctionne bien. Mon problème est que je n'arrive pas à centrer verticalement le texte dans la boite en bas à gauche qui est définie par la class "boxtext"
J'ai essayé tout ce que j'ai trouvé comme solutions, sans succès. J'ai tellement bricolé la chose que je ne sais même plus exactement où j'en suis.
Deuxième problème est que je voudrais augmenter la taille de la première lettre du texte de la première diapo. Pas faire une lettrine mais juste augmenter la taille de la première lettre. Je n'ai pas trouvé de solution, là non-plus.

Par avance merci,

fifi

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Slider</title>
  <link rel="stylesheet" href="diaphor.css">
</head>
<body>
  <!-- Horizontal -->
  <div class="slider-container slider-1">
      <span style="position: absolute; top: 4%; left: 3%; z-index: 10;width:150px; height: 200px; background-color: transparent;background-image: url(LogoACAA-trans-navy.gif);"><img src="LogoACAA-trans-navy.gif" width="100%"></span>
    <div class="slider">
 
      <!-- Photo 1 -->
      <p style="background-image: url(1.jpg); background-position:center;background-size: cover;">
          <span class="basslide" style="color: white;">
              <span class="titreslide" style="">titre première diapo</span>
              <span class="boxtext" style="color: white;font-size: 2em;">
              Lorem ipsum odor amet, consectetuer adipiscing elit. Sollicitudin volutpat sodales montes dignissim nascetur efficitur ante. Vitae ante aliquet habitasse felis varius. Facilisis phasellus vulputate id; tempor ex amet. Placerat ante pharetra accumsan eleifend arcu nullam. Vehicula senectus netus aliquet laoreet tortor; mauris urna ac suspendisse. 
            </span>
          </span>
        </p>
 
 
 
      <!-- Photo 2 -->
      <p style="background-image: url(2.jpg); background-position:center;background-size: cover;">
        <span class="basslide" style="color: white;">
          <span class="titreslide" style="color:navy;">texte de la deuxième diapo</span>
          <span class="boxtext"style="color: white;">
Lorem ipsum odor amet, consectetuer adipiscing elit. Sollicitudin volutpat sodales montes dignissim nascetur efficitur ante. Vitae ante aliquet habitasse felis varius. Facilisis phasellus vulputate id; tempor ex amet. Placerat ante pharetra accumsan eleifend arcu nullam. Vehicula senectus netus aliquet laoreet tortor; mauris urna ac suspendisse. 
              </span>
            </span>
      </p>
 
 
 
      <!-- Photo 3 -->
      <p style="background-image: url(3.jpg); background-position:center;background-size: cover;">
          <span class="basslide"style="color: white;">
              <span class="titreslide" style="">Texte de la troisième diapo</span>
              <span class="boxtext" style="color: white;">
              Lorem ipsum odor amet, consectetuer adipiscing elit. Sollicitudin volutpat sodales montes dignissim nascetur efficitur ante. Vitae ante aliquet habitasse felis varius. Facilisis phasellus vulputate id; tempor ex amet. Placerat ante pharetra accumsan eleifend arcu nullam. Vehicula senectus netus aliquet laoreet tortor; mauris urna ac suspendisse. 
            </span>
          </span>
        </p>
 
 
 
      <!-- Poto 4 -->
     <p style="background-image: url(4.jpg); background-position:center;background-size: cover;">
          <span class="basslide" style="color: white;">
              <span class="titreslide" style="">Texte de la quatième diapo</span>
              <span class="boxtext" style="color:white;">
              Lorem ipsum odor amet, consectetuer adipiscing elit. Sollicitudin volutpat sodales montes dignissim nascetur efficitur ante. Vitae ante aliquet habitasse felis varius. Facilisis phasellus vulputate id; tempor ex amet. Placerat ante pharetra accumsan eleifend arcu nullam. Vehicula senectus netus aliquet laoreet tortor; mauris urna ac suspendisse. 
            </span>
          </span>
        </p>
 
 
 
 
    <!-- retour Photo 1 -->
      <p style="background-image: url(1.jpg); background-position:center;background-size: cover;">
          <span class="basslide" style="color: white;">
              <span class="titreslide" style="">titre première diapo</span>
              <span class="boxtext" style="color: white;font-size: 2em;">
              Lorem ipsum odor amet, consectetuer adipiscing elit. Sollicitudin volutpat sodales montes dignissim nascetur efficitur ante. Vitae ante aliquet habitasse felis varius. Facilisis phasellus vulputate id; tempor ex amet. Placerat ante pharetra accumsan eleifend arcu nullam. Vehicula senectus netus aliquet laoreet tortor; mauris urna ac suspendisse. 
            </span>
          </span>
        </p>
 
    </div>
 
  </div>
<div style="height: 100vh; width: 100%; background-color: yellow;">
    la suite
</div>
</body>
</html>

le CSS

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
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
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background:#fff;
  font-family: "Times New Roman", sans-serif;
}
 
.titreslide {
    width: 100%;
    height: 15%;
    /*background-color: red;*/
    position: absolute;
    top: Opx;
    left: 0px;
    overflow: hidden;
    font-size: 3.7em;
}
 
.basslide {
    /*background-color: rgba(92,92,14,0.5);*/
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height:60%;    
}
 
 
.boxtext {
    font-size: 1.5em; 
    text-align: left; 
    position: absolute; 
    bottom: 0px; 
    left: 50px; 
    width:50%; 
    height:200px; 
    padding-left: 15px;
    padding-top: 10px;
    display: table-cell;
    vertical-align: middle;
    border-radius: 20px 0 0 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.15) , rgba(255, 255, 255, 0));
    font-style: italic;
}
 
.slider-1 {
    width: 100%;
    height: 100vh;
  /*max-width: 800px;*/
  /*margin: 100px auto;*/
  overflow: hidden;
 
}
.slider-1 .slider {
  animation: slider-1 20s infinite ease-in-out;
  display: flex;
 
}
.slider-1 p {
  background: #234;
  flex-shrink: 0;
    display: flex;
  width: 100%;
    height: 100vh;
  text-align: center;
    justify-content: center;
    vertical-align: middle;
  color: #fff;
}
 
 
/* 
   5% par transition
   reste divisé par nb de pauses
   80(%) / 4 = 20(%) par pause
*/
 
@keyframes slider-1 {
  0%,
  20% {
    transform: translateX(0);
  }
  25%,
  45% {
    transform: translateX(-100%);
  }
  50%,
  70% {
    transform: translateX(-200%);
  }
  75%,
  95% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-400%);
  }
}

**fifidibosco** · 29/07/2024, 17h59

.
le problème est dans le css .boxtext Il faut modifier le display: table-cell; en display : flex; et ajouter align-items : center;

je mets ce sujet en "Résolu" et j'en crée un autre pour la taille de la première lettre.

fifi

Centrage vertical d'un texte

Centrer un élément en CSS

Discussions similaires

Partager

Partager