0
votes

toujours garder le pseudo élément horizontalement au milieu

Comment puis-je toujours garder un pseudo élément horizontalement au milieu? Je l'ai positionné de manière absolue avec une valeur en pourcentage, ce que j'ai compris était relatif à la largeur de l'élément, mais sur différentes tailles d'écran, le "OU" circulaire n'est pas toujours au milieu ...

Voir ci-dessous:

<div class="content">
      <div class="cc-content cc-content-1">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
      <div class="cc-content cc-content-2">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
</div>

.content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    margin: 20px;
}

.cc-content {
    width: 50%;
    padding: 5px 20px;
    position: relative;
    background-color: red;
}

.cc-content-1 {
  margin-right: 3px;
}

.cc-content-2 {
  margin-left: 3px;
}

.cc-content-1:after {
    content: 'OR';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    line-height: 60px;
    top: 20px;
    left: 90%;
    z-index: 1;
    font-size: 21px;
    font-weight: bold;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    background-color: #F2F2F2;
    color: #006AAD;
}

Si vous redimensionnez la fenêtre, vous pouvez voir que le cercle se décale légèrement du centre, comment le garder toujours au centre avec la position absolue? N'est-ce pas un pourcentage? J'ai essayé de jouer avec flex car il est dans un conteneur flex mais cela ne semble rien faire.

Comment centrer horizontalement un élément de position absolue : après ? p>

html css pseudo-element

0 commentaires

3 Réponses :

0
votes

Au lieu de left: 90% , vous pouvez faire left: calc (100% - 30px) .

30px correspond à la moitié de la largeur du pseudo-élément.

1 commentaires

Je pense que cela devrait être 33px pour tenir compte des marges de 3px sur chaque div.

1
votes

Tout d'abord, je mettrais le "ou" dans le code HTML pour que les lecteurs d'écran le lisent correctement à haute voix. Ensuite, vous pouvez positionner cet élément par rapport à l'ensemble du conteneur, avec un pourcentage oui. Vous le déplacez exactement au milieu avec gauche: 50% puis de sa demi-largeur vers la gauche avec transform: translateX (-50%) (de cette façon vous ne Je n'ai pas besoin de savoir quelle est la largeur de l'élément "ou").

<div class="content">
      <div class="cc-content cc-content-1">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
      <div class="or">or</div>
      <div class="cc-content cc-content-2">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
</div>

.content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    margin: 20px;
    position: relative;
}

.cc-content {
    width: 50%;
    padding: 5px 20px;
    position: relative;
    background-color: red;
}

.cc-content-1 {
  margin-right: 3px;
}

.cc-content-2 {
  margin-left: 3px;
}

.or {
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    line-height: 60px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    font-size: 21px;
    font-weight: bold;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    background-color: #F2F2F2;
    color: #006AAD;
    text-transform: uppercase;
}

0 commentaires

2
votes

Très similaire à @mgrsskls mais utilisant l'élément : after réel. C'est une vieille astuce pour utiliser absolu , puis ajouter gauche et une marge négative égale à la demi-largeur. Mais dans votre cas, il y a une marge supplémentaire à laquelle il faut également penser.

<div class="content">
      <div class="cc-content cc-content-1">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
      <div class="cc-content cc-content-2">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
</div>

.content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    margin: 20px;
}

.cc-content {
    width: 50%;
    padding: 5px 20px;
    position: relative;
    background-color: red;
}

.cc-content-1 {
  margin-right: 3px;
}

.cc-content-2 {
  margin-left: 3px;
}

.cc-content-1:after {
    content: 'OR';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    line-height: 60px;
    top: 20px;
    left: 100%;
    margin-left: -27px;
    z-index: 1;
    font-size: 21px;
    font-weight: bold;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    background-color: #F2F2F2;
    color: #006AAD;
}

0 commentaires