• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Pozycjonowanie elementu poprzez odwołanie do jego środka

VPS Starter Arubacloud
0 głosów
166 wizyt
pytanie zadane 15 czerwca 2021 w HTML i CSS przez PanRafal Początkujący (290 p.)
Czy istnieje sposób na odwołanie się do centrum jakiegoś elementu, np diva? Chciałbym rozłożyć divy na okręgu i najłatwiej by było mi to zrobić jakbym mógł wskazać gdzie mają leżeć ich środki.
komentarz 15 czerwca 2021 przez pablop76 VIP (123,060 p.)
Jeżeli masz element pozycjonowany absolutnie względem rodzica i znasz jego wymiary to chyba nie ma problemu ustawić go według dowolnej pozycji?
komentarz 15 czerwca 2021 przez PanRafal Początkujący (290 p.)
Nie chodzi o problem, tylko o ułatwienie sobie życia.
komentarz 16 czerwca 2021 przez pablop76 VIP (123,060 p.)
<div class="circle">
	<div class="outside left"></div>
	<div class="outside between-tl"></div>
	<div class="outside between-tr"></div>
	<div class="outside right"></div>
	<div class="outside top"></div>
	<div class="outside between-bl"></div>
	<div class="outside between-br"></div>
	<div class="outside bottom"></div>
</div>
.circle{
	width: 300px;
	height: 300px;
	border-radius: 100%;
	border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
	padding: 18px;
}
.outside{
	width: 50px;
	height: 50px;
	border-radius: 100%;
	position: absolute;
	border: 1px solid green;
	background-color: red;
}

.left{
	left: -25px;
	top: calc(50% - 25px);
}
.between-tl{
	left: 25px;
	top: 25px;
}
.top{
	left: calc(50% - 25px);
	top: -25px;
}
.between-tr{
	right: 25px;
	top: 25px;
}
.right{
	right: -25px;
	top: calc(50% - 25px);
}
.between-br{
	right: 25px;
	bottom: 25px;
}

.bottom{
	left: calc(50% - 25px);
	bottom: -25px;
}
.between-bl{
	left: 25px;
	bottom: 25px;
}

 

komentarz 16 czerwca 2021 przez VBService Ekspert (251,210 p.)
edycja 16 czerwca 2021 przez VBService

Nie wiem czy do końca w temacie, ale według Mnie ciekawa wizualizacja: 

Regular polygon with [in|circum] circle (SVG + CSS + Vanilla JS)

 

BTW: Placing Items on a Circle
          Positioning divs in a circle using JavaScript

1
komentarz 16 czerwca 2021 przez PanRafal Początkujący (290 p.)

@pablop76, Dzięki.

1 odpowiedź

+2 głosów
odpowiedź 15 czerwca 2021 przez Comandeer Guru (599,730 p.)

Jedyne, co mi przychodzi do głowy, to zrobienie tych okręgów o wielkości samego diva, nadanie im transform-origin: center i następnie zeskalowanie ich i rozmieszczenie transformacjami. PoC: https://codepen.io/Comandeer/pen/vYxveEM

Trzeba tylko uważać, bo po przeskalowaniu trzeba wziąć pod uwagę, że z punktu widzenia kółka całość w przykładzie ma teraz 200%x200%, więc przesunięcia trzeba pomnożyć przez 2. Analogicznie będzie przy innym współczynniku skalowania.

Podobne pytania

+1 głos
1 odpowiedź 983 wizyt
+1 głos
2 odpowiedzi 1,626 wizyt
0 głosów
1 odpowiedź 147 wizyt
pytanie zadane 7 lutego 2021 w PHP przez CSSoup Mądrala (6,460 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...