Image encadrer par 4 liens [Résolu]

astrocurieux 187 Messages postés mardi 24 février 2015Date d'inscription 4 décembre 2017 Dernière intervention - 27 nov. 2017 à 14:18 - Dernière réponse : astrocurieux 187 Messages postés mardi 24 février 2015Date d'inscription 4 décembre 2017 Dernière intervention
- 30 nov. 2017 à 10:57
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.
Afficher la suite 
187Messages postés mardi 24 février 2015Date d'inscription 4 décembre 2017 Dernière intervention

3 réponses

Répondre au sujet
astrocurieux 187 Messages postés mardi 24 février 2015Date d'inscription 4 décembre 2017 Dernière intervention - 29 nov. 2017 à 12:15
0
Utile
2
sujet resolu
telliak 3062 Messages postés mercredi 20 septembre 2006Date d'inscription 10 décembre 2017 Dernière intervention - 30 nov. 2017 à 05:59
Une bonne idée aurait été de dire comment...
astrocurieux 187 Messages postés mardi 24 février 2015Date d'inscription 4 décembre 2017 Dernière intervention - 30 nov. 2017 à 10:57
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.
Commenter la réponse de astrocurieux