verticale

Sujet résolu

14 octobre 2018 à 13:57:39

Bonjour la communauté,

Je suis entrain de réaliser un devoir et je bloque à un moment où il faut centré une lettre dans un box coloré (verticalement et verticalement).

Voila mon html (désolé pour vos yeux):

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TD 5</title>
  <link rel="stylesheet" href="style_td5.css">
</head>

<body>
  <div class="bandeSuperieure">
    <div class="contenu">
      <h1>Titre de mon site</h1>
      <div class="menus">
        <a href="">Menu 1</a> |
        <a href="">Menu 2</a> |
        <a href="">Menu 3</a> |
        <a href="">Menu 4</a>
      </div>
    </div>
  </div>
  <div class="bandeCentrale">
    <div class="contenu">
      <div class="bc_gauche">
        <h1>Contenu principal</h1>
        <div class="blockABC">
          <div class="blockA">
            <b class="centré">A</b>
          </div>
          <div class="blockB">
            <b class="centré">B</b>
          </div>
          <div class="blockC">
            <b class="centré">C</b>
          </div>
        </div>
        <div class="blockDE">
          <div class="blockD">
            <b class="centré">D</b>
          </div>
          <div class="blockE">
            <b class="centré">E</b>
          </div>
        </div>
      </div>
      <div class="bc_droit">
        <div class="contenu">
          <h2>Partie 1</h2>
          <ul>
            <li>Rubrique 1</li>
            <li>Rubrique 2</li>
            <li>Rubrique 3</li>
          </ul>
          <h2>Partie 2</h2>
          <ul>
            <li>Rubrique 4</li>
            <li>Rubrique 5</li>
            <li>Rubrique 6</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="bandeInferieure">
    <div class="contenu">
      <div class="infos">
        <h2>Informations :</h2>
        <ul>
          <li> <a href="">Lien 1</a> </li>
          <li> <a href="">Lien 2</a> </li>
          <li> <a href="">Lien 3</a> </li>
        </ul>
      </div>
      <div class="etudiant">
        <h2>Étudiant :</h2>
        <ul>
          <li>Nom</li>
          <li>Prénom</li>
        </ul>
      </div>
      <div class="signature">
        <div>Interface réalisée en 1er semestre de DUT Informatique</p>
        </div>
      </div>
    </div>
</body>

</html>

et mon code CSS associé:

body{
  background: rgb(81, 91, 87);
  margin: 0px;
}

.bandeSuperieure{
  color: white;
}

.bandeSuperieure>.contenu{
}

.bandeSuperieure .menus{
  margin-bottom: 10px;
}

.bandeSuperieure a{
  font-size: 20px;
  margin: 0px 5px 0px 5px;
}

.bandeSuperieure>.contenu>h1{
  margin: 25px 0px 10px 0px;
}

.bandeCentrale{
  background-color: rgb(230, 230, 230);
}

.bandeCentrale > .contenu{
  text-align: center;
}

.bc_gauche{
  display: inline-block;
}

.bc_gauche>h1{
  margin: 0px;
}

.blockA{
  display: inline-block;
  background-color: rgb(28, 194, 195);
  width: 250px;
  height: 150px;
  margin: 12px 12px 12px 0px;
}

.blockB{
  display: inline-block;
  background-color: rgb(255, 89, 18);
  width: 250px;
  height: 150px;
  margin: 12px 12px 12px 10px;
}

.blockC{
  display: inline-block;
  background-color: rgb(11, 168, 27);
  width: 250px;
  height: 150px;
  margin: 12px 12px 12px 10px;
}

.blockD{
  display: inline-block;
  background-color: rgb(165, 62, 237);
  width: 389px;
  height: 50px;
  margin: 12px 10px 12px 0px;
}

.blockE{
  display: inline-block;
  background-color: rgb(165, 62, 237);
  width: 389px;
  height: 50px;
  margin: 12px 10px 12px 10px;
}

.centré {
  vertical-align: middle
}

.bc_droit{
  display: inline-block;
  margin-left: 20px;
  background-color: rgb(18, 157, 176);
  width: 280px;
  height: 279px;
}

.bc_droit h2 {
  text-align: left;
  padding-left: 20px;
}

.bc_droit li {
  text-align: left;
}

.bc_droit ul li {
  font-size: 18px;
}

Pour centrer les lettres A, B, C, D et E j'ai créé la classe .centré et j'ai appliqué un vertical-align: middle; mais ça ne fait rien.

Pourriez-vous m'aider s'il vous plait?

-
Edité par ZyxcelZoïd 14 octobre 2018 à 13:59:08

ChrisLebure

14 octobre 2018 à 14:38:45

Bonjour,

centrage horizontal : ajouter text-align:center pour la div
centrage vertical : ajouter line-height égale à la hauteur de la div

Ça marche comme ça ? et tout sera indépendant de la taille de caractère utilisée

AliasDmc

14 octobre 2018 à 15:34:23

Bonjour zyxcelzoid,

La solution que propose ChrisLebure ne fonctionne pas si tu commences à mettre du contenu

A mon avis, il faut voir du coté des flexbox

ChrisLebure a écrit:
centrage vertical : ajouter line-height égale à la hauteur de la div

Découvrez les Css avec la zonecss.fr

S__Florent

14 octobre 2018 à 18:10:22

html :

<body>
<div class="mega_contenu">
    <div class="contenu">
        <div class="contenu_centrale01"> 
            <div class="block_centrale01" id="block_a">A</div>
            <div class="block_centrale01" id="block_b">B</div>
            <div class="block_centrale01" id="block_c">C</div>
        </div>
        <div class="contenu_centrale02">
            <div class="block_centrale02" id="block_d">D</div>
            <div class="block_centrale02" id="block_e">E</div>
        </div>
    </div>

    <div class="bc_droit">
        <h2>Partie 1</h2>
        <ul>
            <li>Rubrique 1</li>
            <li>Rubrique 2</li>
            <li>Rubrique 3</li>
        </ul>
        <h2>Partie 2</h2>
        <ul>
            <li>Rubrique 4</li>
            <li>Rubrique 5</li>
            <li>Rubrique 6</li>
        </ul>
    </div>
</div>
</body>

css :

.mega_contenu {
    display: flex;
    justify-content: center;
}
.bc_droit {
    background-color: rgb(18, 157, 176);
    padding: 12px;
    width: 200px;
}
.contenu_centrale01, .contenu_centrale02 {
    display:flex;
}
.block_centrale01 {
    width: 250px;
    height: 150px;
    line-height: 150px; /* centre l'element de haut en bas */
}
.block_centrale02 {
    width: 389px;
    height: 50px;
    line-height: 50px; /* centre l'element de haut en bas */
}
.block_centrale01, .block_centrale02 {
    margin: 12px;
    text-align: center; /* centre le texte de gauche à droite */
}
#block_a {
    background-color: rgb(28, 194, 195);
}
#block_b {
    background-color: rgb(255, 89, 18);
}
#block_c {
    background-color: rgb(11, 168, 27);
}
#bc_droit {
    background-color:rgb(18, 157, 176);
}
#block_d, #block_e {
    background-color: rgb(165, 62, 237);
}

après comme l'ont dit @AliasDmc , si tu veux un centrage automatique je ne vois plus qu'une solution, créer une boite dans tes boites de couleurs. Un peu comme je l'ai fait avec "mega_contenu"

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_perfect_center

https://www.w3schools.com/css/css3_flexbox.asp

-
Edité par S__Florent 14 octobre 2018 à 18:14:29

ZyxcelZoïd

14 octobre 2018 à 20:37:39

Merci à tous!

Maintenant j'ai pu centré les lettres.