Jak wyśrodkować div pionowo wewnątrz bezwzględnie położonego div nadrzędnego
Staram się umieścić niebieski pojemnik na środku różowego, jednak wygląda na to, że vertical-align: middle;
nie spełnia tego zadania w tym przypadku.
<div style="display: block; position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
<div style="background-color: lightblue;">test</div>
</div>
</div>
Wynik:
Oczekiwanie:
Proszę zasugerować, Jak mogę to osiągnąć.
8 answers
Przede wszystkim należy zauważyć, że {[5] } ma zastosowanie tylko do komórek tabeli i elementów poziomu wewnętrznego.
Istnieje kilka sposobów na osiągnięcie pionowych wyrównań, które mogą lub nie mogą zaspokoić Twoich potrzeb. Jednak pokażę Ci dwa metody z moich ulubionych:
1. Używając transform
i top
.valign {
position: relative;
top: 50%;
transform: translateY(-50%);
/* vendor prefixes omitted due to brevity */
}
<div style="position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
Kluczowym punktem jest to, że wartość procentowa na {[7] } jest względem height
bloku zawierającego; podczas gdy wartość procentowa na transform
S jest względem rozmiaru samego pudełka (obwiedni).
Jeśli napotkasz problemy z renderowaniem czcionki (rozmazana czcionka), poprawką jest dodanie perspective(1px)
do deklaracji transform
, aby stało się:
transform: perspective(1px) translateY(-50%);
Warto zauważyć, że CSS transform
JEST OBSŁUGIWANA W IE9 + .
2. Używanie inline-block
(pseudo -) elementów
W tej metodzie mamy dwa elementy inline-block
, które są wyrównane pionowo na środku przez vertical-align: middle
.
Jeden z mają height
z 100%
swojego rodzica, a drugi jest naszym pożądanym elementem, którego chcieliśmy wyrównać w środku.
.parent {
text-align: left;
position: absolute;
height: 56px;
background-color: pink;
white-space: nowrap;
font-size: 0; /* remove the gap between inline level elements */
}
.dummy-child { height: 100%; }
.valign {
font-size: 16px; /* re-set the font-size */
}
.dummy-child, .valign {
display: inline-block;
vertical-align: middle;
}
<div style="position: absolute; left: 50px; top: 50px;">
<div class="parent">
<div class="dummy-child"></div>
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
Wreszcie, powinniśmy użyć jednej z dostępnych metod , aby usunąć lukę między elementami poziomu inline .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-04 23:55:36
Użyj tego:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Poleć ten link: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-25 10:53:59
Użyj flex blox w absoutely pozycjonowanym div, aby wyśrodkować jego zawartość.
Zobacz przykład https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview
.some-absolute-div {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-05 21:55:00
Środek w pionie i poziomie:
.parent{
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.c{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-14 15:39:53
Możesz użyć display:table
/table-cell;
.a{
position: absolute;
left: 50px;
top: 50px;
display:table;
}
.b{
text-align: left;
display:table-cell;
height: 56px;
vertical-align: middle;
background-color: pink;
}
.c {
background-color: lightblue;
}
<div class="a">
<div class="b">
<div class="c" >test</div>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-11 13:10:58
Proszę sprawdzić tę odpowiedź na podobny problem.
To zdecydowanie najprostszy sposób, jaki znalazłem.
Https://stackoverflow.com/a/26079837/4593442
Uwaga. Do testów w safari użyłem display: -webkit-flex; zamiast display: flex;.
Przypisy Jestem tylko nowicjuszem, dzieląc się Pomocą od kogoś, kto jest wyraźnie doświadczony.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:29
Oto prosty sposób użycia Top obiektu.
Np: jeśli absolutny Rozmiar elementu wynosi 60px.
.absolute-element {
position:absolute;
height:60px;
top: calc(50% - 60px);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-20 07:46:01
Dodatkowe proste rozwiązanie
HTML:
<div id="d1">
<div id="d2">
Text
</div>
</div>
CSS:
#d1{
position:absolute;
top:100px;left:100px;
}
#d2{
border:1px solid black;
height:50px; width:50px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-25 09:46:15