Avec cette implémentation actuelle, l'élément de cercle se déplace sur la page lorsque la page est redimensionnée ou dans la vue mobile. J'ai besoin de fixer de façon permanente le cercle en position entre les éléments div et blancs entre les éléments div et blancs. P>
p>
<div> <div class="green"></div> <div class="circle"></div> <div class="white"></div> <div>
5 Réponses :
comme dans @mihai Commentaire
Vous définissez
position: absolu; code> au cercle. C'est un parent absolu à quel conteneur? Comme votre code est synonyme, il est simplement relatif au corps p> blockQquote>paramètre
Position: relative code> au.Container code> Vous avez le cercle en mouvement à l'intérieur. p>p>
<div class="container"> <div class="green"></div> <div class="circle"></div> <div class="white"></div> <div>
Pour éviter d'utiliser Calc à gauche: 50%; Transformer: Translatex (-50%);
J'ai essayé de régler le conteneur vers le relativement, du cercle vers absolu et de retirer le positionnement de vert et de blanc, mais le cercle se déplace toujours sur la page lorsqu'il est basculé entre les vues de l'appareil. Désolé si on me manque quelque chose!
Êtes-vous sûr de ne pas avoir d'autres CSS qui interfèrent avec cela?
Ceci est une solution qui n'utilise pas du tout la position. Il utilise à la place des grilles CSS.
Cette réponse n'est pas une réponse claire à la question, mais montre une alternative p>
p>
<div class="container"> <div class="green"></div> <div class="white"></div> <div class="circle">A</div> </div>
J'ai une approche différente ici, ce qui pourrait répondre à vos besoins.
Dans cette réponse, le cercle lui-même est un conteneur de positionné p> relative code>, qui n'a pas de contenu sauf un absolu Positionné pseudo élément :: après code>. Il n'utilise donc pas d'espace, mais sit droit entre .green code> et .white code>.
Le pseudo-élément est ensuite positionné dans le centre ( à gauche: 50%; code>) et traduit par la moitié de sa taille ( transformer: Traduire (-50%, -50%); Code >) p>
<div class="container">
<div class="green">AAAAA<br>AAA</div>
<div class="circle"></div>
<div class="white">CCCCCCC<br></div>
<div>
salut si vous devez rendre le cercle toujours aligné horizontalement au centre, quelle que soit la taille de l'écran.
transformer: translatex (-50%);
à gauche: 50%. em> strong> pour un alignement vertical dans le milieu, transformer la transformation: Traducty (-50%); et top: 50% em> fort>. p> pour un alignement horizontal et vertical au milieu, utilisez transformer: Traduire (-50%, -50%); TOP: 50%; À gauche: 50% em> strong>. p> ci-dessous CSS pour le cercle est donné pour votre exigence. J'espère que cela aide. P> p>
<div class="circle"></div>
Je suggère de déplacer le cercle à l'intérieur de la section verte et d'aligner vers le bas, ou d'utiliser p> :: après code>. Cette approche garantit que le cercle sera toujours centré.
Ici, j'ai utilisé `:: Après 'parce que les éléments vides ne sont pas bons, il existe des pseudo-éléments.
<div>
<div class="green">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="white">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div>
Ce code ne produit rien près de votre image. Veuillez fournir un exemple complet. Vous pouvez utiliser des boîtes de sable basées sur le cloud pour cela comme CodePen ou Jsfiddle (entre autres)
Vous définissez
position: absolu; sur le cercle. Il est absolu par rapport à quel conteneur? Comme votre code est debout, il est juste de par rapport au corpsJ'ai mis à jour l'exemple de sorte qu'il fonctionne. Il est relatif à un parent div, non ni des éléments de frère frontal.