Przesunięcie elementu osi Y o 50% spowoduje przesunięcie go w dół o 50% jego własnej wysokości, a nie o 50% wysokości rodziców, jak bym się spodziewał. Jak powiedzieć elementowi tłumaczącemu, aby oparł procent tłumaczenia na elemencie nadrzędnym? A może czegoś nie rozumiem?
css
translate
percentage
translate3d
Andrew Tibbetts
źródło
źródło
Odpowiedzi:
Używając procentu w tłumaczeniu, odnosi się do szerokości lub wysokości samego siebie. Spójrz na https://davidwalsh.name/css-vertical-center ( demo ):
źródło
transform: translate(50%)
wydaje się używać szerokości i wysokości elementu nadrzędnegoMożesz użyć vw i vh, aby przetłumaczyć na podstawie rozmiaru widocznego obszaru
@keyframes bubbleup { 0% { transform: translateY(100vh); } 100% { transform: translateY(0vh); } }
źródło
To, co działa u mnie tylko przy użyciu CSS, to:
.child { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Backward compatibility */ -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
Jak to działa:
źródło
Aby użyć wartości procentowej we właściwości translate, musisz użyć Javascript: http://jsfiddle.net/4wqEm/27/
Kod HTML :
<div id="parent"> <div id="children"></div> </div>
Kod CSS:
#parent { width: 200px; height: 200px; background: #ff0; } #children { width: 10%; height: 10%; background: #f00; }
Kod JavaScript:
parent = document.getElementById('parent'); children = document.getElementById('children'); parent_height = parent.clientHeight; children_translate = parent_height * 50/100; children.style.webkitTransform = "translateY("+children_translate+"px)";
Mam nadzieję, że mógłbym ci pomóc i powiedzieć mi, jeśli masz inny problem.
źródło
Twoje stwierdzenie jest całkowicie słuszne, jeśli chodzi o wartości procentowe pochodzące z samego przetłumaczonego elementu. Zamiast używać właściwości translate w twoim przypadku, powinieneś używać pozycjonowania bezwzględnego, aby pozostać względem nadrzędnego div. Ustawiłem tutaj absolutnie pionowo twój czerwony div: (nie zapomnij o dodaniu pozycji względem nadrzędnego div, musi być ustawiony inaczej niż statyczny domyślny):
js fiddle pen tutaj
body { margin: 0; width: 100%; height: 100%; } body > div { width: 200px; height: 200px; background: #ff0; position: relative; } body > div > div { width: 10%; height: 10%; -webkit-transform: translateY(-50%); background: #f00; position: absolute; top: 50%; }
źródło
Możesz także użyć jednego dodatkowego bloku i użyć do niego przejścia, z wyjątkiem węzła podrzędnego
Kod HTML :
<div id="parent"> <div id="childrenWrapper"> <div id="children"></div> </div> </div>
css powinno wyglądać mniej więcej tak
#parent { position: relative; width: 200px; height: 200px; background: #ff0; } #childrenWrapper{ width: 100%; height: 100%; } #children { width: 10%; height: 10%; background: #f00; }
źródło
Możesz ustawić element w pozycji bezwzględnej i użyć właściwości left i top, aby przyjąć wartość procentową jako element nadrzędny.
źródło
Jest rozwidlony z wymaganym pozycjonowaniem w poniższym przykładzie roboczym adresu URL
body { margin: 0; width: 100%; height: 100%; } body>div { position: relative; width: 200px; height: 200px; background: #ff0; } body>div>div { position: absolute; left: 50%; top: 50%; width: 10%; height: 10%; background: #f00; transform: translate(-50%, -50%); }
uwagi:
źródło
Rozwiązaniem tego problemu jest w ogóle nie używać tłumaczenia. Kiedy tłumaczysz element, wartość procentowa, którą wybierasz, zależy od jego własnej wysokości.
Jeśli chcesz ustawić element na podstawie wysokości rodzica, użyj top: 50%;
Tak więc kod będzie wyglądał następująco:
body { margin: 0; width: 100%; height: 100%; } body > div { width: 200px; height: 200px; background: #ff0; position: relative; } body > div > div { position: absolute; top: 50%; width: 10%; height: 10%; /* -webkit-transform: translateY(50%); */ background: #f00; }
źródło