Image encadrer par 4 liens [Résolu/Fermé]

Signaler
Messages postés
335
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
15 décembre 2019
-
Messages postés
335
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
15 décembre 2019
-
bonjour les gens !

je suis sur le point de résoudre mon problème seul mais quelque chose me bloque et c'est très probablement quelque chose de tout nul en plus ...

je cherche a centrer mes liens sur chaque bord de mon écran (un lien a gauche un autre a droit et un dernier en bas)

mais pas moyen de centrer celui du bas, alors que c’était celui que je pensais le plus simple ...

voila du code sous bootstrap 4:

    <div class="row">
      <div class="col-lg-12 masterBox">
        <div class="Box slaveBox">
          <span class="side_label_left">
            <a href="#">
              <p>Websites</p>
            </a>
          </span>
          <span class="side_label_right">
            <a href="#">
              <p>Projects</p>
            </a>
          </span>
          <span class="side_label_bottom">
            <a href="#">
              <p>Skills</p>
            </a>
          </span>
        </div>
      </div>
    </div>


.masterBox {
  display: flex;
  min-height: 300px;
}
.slaveBox {
  margin: auto;
}
.Box {
  background-color: rgba(0, 0, 0, 0.5);
  margin-top: 50px;
  box-shadow: 8px 8px 12px #aaa;
  width: 1300px;
  height: 760px;
}
.side_label_left {
    position: fixed;
    color: #fff;
    height: 100%;
    top: 0;
    left: 15px;
    letter-spacing: 1em;
}
.side_label_left p {
    position: absolute;
    top: 50%;
    transform: rotate(-90deg) translateX(-50%);
    transform-origin: left top;
}

.side_label_right {
    position: fixed;
    color: #fff;
    height: 100%;
    top: 0;
    right: 15px;
    letter-spacing: 1em;
}
.side_label_right p {
    position: absolute;
    top: 50%;
    transform: rotate(270deg) scale(-1) translateX(-50%);
    transform-origin: left top;
}

.side_label_bottom {
  position: fixed;
  color: #fff;
  height: 100%;
  top: 0;
  bottom: 15px;
  letter-spacing: 1em;
}
.side_label_bottom p {
  position: absolute;
  top: 97%;
  left: 70%;
}



si au passage vous avez des idées d'optimisation je suis preneur.
merci.

1 réponse

Messages postés
335
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
15 décembre 2019
2
sujet resolu
Messages postés
3525
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
12 mai 2020
733
Une bonne idée aurait été de dire comment...
Messages postés
335
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
15 décembre 2019
2
j'ai simplement sortie mes liens des classe "col" et "row" et j'ai imposer un margin-left a mon dernier lien pour le centrer.