Próbuję wyśrodkować zawartość zakładek pionowo, ale kiedy dodam styl CSS display:inline-flex
, wyrównanie tekstu w poziomie znika.
Jak mogę ustawić wyrównanie tekstu xiy dla każdej z moich kart?
* { box-sizing: border-box; }
#leftFrame {
background-color: green;
position: absolute;
left: 0;
right: 60%;
top: 0;
bottom: 0;
}
#leftFrame #tabs {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25%;
}
#leftFrame #tabs div {
border: 2px solid black;
position: static;
float: left;
width: 50%;
height: 100%;
text-align: center;
display: inline-flex;
align-items: center;
}
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
Odpowiedzi:
Podejście 1 -
transform
translateX
/translateY
:Przykład tutaj / przykład pełnego ekranu
W obsługiwanych przeglądarkach (większość z nich) możesz używać
top: 50%
/left: 50%
w połączeniu z,translateX(-50%) translateY(-50%)
aby dynamicznie pionowo / poziomo wyśrodkować element.Podejście 2 - metoda Flexbox:
Przykład tutaj / przykład pełnego ekranu
W obsługiwanych przeglądarkach ustaw
display
element docelowy naflex
i użyj goalign-items: center
do centrowania w pionie ijustify-content: center
do centrowania w poziomie. Po prostu nie zapomnij dodać prefiksów dostawców w celu dodatkowego wsparcia przeglądarki ( patrz przykład ).Podejście 3 -
table-cell
/vertical-align: middle
:Przykład tutaj / przykład pełnego ekranu
W niektórych przypadkach należy upewnić się, że wysokość elementu
html
/body
jest ustawiona na100%
.Aby wyrównać w pionie, ustaw element nadrzędny
width
/height
do100%
i dodajdisplay: table
. Następnie do elementu podrzędnego, zmieńdisplay
siętable-cell
i dodaćvertical-align: middle
.Aby wyśrodkować w poziomie, możesz dodać,
text-align: center
aby wyśrodkować tekst i inneinline
elementy potomne. Możesz też użyćmargin: 0 auto
, zakładając, że element jestblock
równy.Podejście 4 - absolutnie ustawione
50%
od góry z przesunięciem:Przykład tutaj / przykład pełnego ekranu
Takie podejście zakłada, że tekst ma znanej wysokości - w tym przypadku
18px
. Wystarczy bezwzględnie ustawić element50%
od góry względem elementu nadrzędnego. Użyjmargin-top
wartości ujemnej stanowiącej połowę znanej wysokości elementu, w tym przypadku --9px
.Podejście 5 -
line-height
metoda (najmniej elastyczna - nie sugerowana):Przykład tutaj
W niektórych przypadkach element nadrzędny będzie miał stałą wysokość. Aby wyśrodkować w pionie, wystarczy ustawić
line-height
wartość elementu podrzędnego równą stałej wysokości elementu nadrzędnego.Chociaż to rozwiązanie będzie działać w niektórych przypadkach, warto zauważyć, że nie będzie działać, gdy jest wiele wierszy tekstu - takich jak ten .
źródło
display: flex
nadrzędny i podrzędnyalign-self: center
.Jeśli CSS3 jest opcją (lub masz awarię), możesz użyć transformacji:
W przeciwieństwie do pierwszego podejścia powyżej, nie chcesz używać left: 50% z tłumaczeniem negatywnym, ponieważ w IE9 + występuje błąd przepełnienia. Użyj dodatniej właściwej wartości, a nie zobaczysz poziomych pasków przewijania.
źródło
transform: translateX(50%) translateY(50%);
zamiast tego powinna być transformacja . Powyższa transformacja nie jest poprawna pod względem składniowym zgodnie z dokumentami transformacji Mozilli .transform
wartości, które mogą przyjmować wartości X i Y, ma podstawową funkcję do przyjmowania obu, a funkcje specjalne do przyjmowania tylko jednej.Najlepszym sposobem wyśrodkowania pudełka w pionie i poziomie jest użycie dwóch pojemników:
Pojemnik zewnętrzny:
display: table;
Wewnętrzny pojemnik:
display: table-cell;
vertical-align: middle;
text-align: center;
Pole zawartości:
display: inline-block;
Próbny :
Zobacz także to skrzypce !
Centrowanie na środku strony:
Aby wyśrodkować treść na środku strony, dodaj do kontenera zewnętrznego:
position : absolute;
width: 100%;
height: 100%;
Oto demo tego:
Zobacz także to skrzypce !
źródło
Oto jak użyć 2 prostych właściwości flex do wyśrodkowania n div na osi 2:
align-items: center
wyśrodkuje bloki pionowojustify-content: space-around
rozdzieli wolną poziomą przestrzeń wokół divźródło
Uruchom ten fragment kodu i zobacz div wyrównany pionowo i poziomo.
źródło
Najprostszym i najczystszym rozwiązaniem dla mnie jest użycie właściwości CSS3 „transform”:
źródło
Pierwsze dziecko zostanie wyrównane pionowo i poziomo w środku
źródło
aby wyśrodkować Div na stronie check the fiddle link
Aktualizacja Inną opcją jest użycie Flex Box check the fiddle link
źródło
Poniżej znajduje się podejście Flex-box, aby uzyskać pożądany wynik
źródło
Innym podejściem jest użycie tabeli:
źródło
Aby wyśrodkować element w pionie i poziomie, możemy również użyć poniższych właściwości.
Ta właściwość CSS wyrównuje elementy w pionie i akceptuje następujące wartości:
flex-start : elementy są wyrównane do górnej części kontenera.
flex-end : Przedmioty są wyrównane do dna pojemnika.
środek : elementy są wyrównane do pionowego środka pojemnika.
linia bazowa : elementy są wyświetlane w linii podstawowej kontenera.
stretch : Przedmioty są rozciągane w celu dopasowania do pojemnika.
Ta właściwość CSS justify-content , która wyrównuje elementy w poziomie i akceptuje następujące wartości:
flex-start : elementy są wyrównane do lewej strony pojemnika.
flex-end : Przedmioty są wyrównane do prawej strony pojemnika.
środek : elementy są wyrównane na środku pojemnika.
Przestrzeń pomiędzy : Pozycje wyświetlane w równych odstępach między nimi.
spacja : przedmioty są wyświetlane w równych odstępach wokół nich.
źródło
Podejście do siatki css
źródło
Konieczne jest zastosowanie nowego i łatwego rozwiązania:
źródło
źródło
Po prostu ustaw góra, dół, lewo i prawo na 0.
źródło
Możesz to osiągnąć za pomocą CSS (twój element
display:inline-grid
+grid-auto-flow: row;
) Grid i Flex Box (element nadrzędny)display:flex;
),Zobacz poniższy fragment
źródło
Link źródłowy
Zobacz inne metody tutaj
źródło
Najprostszym sposobem wyśrodkowania div zarówno w pionie, jak i poziomie jest:
Jeszcze jeden przykład :
źródło
Jest to związany z tym problem, który ludzie mogą przejść na tę stronę podczas wyszukiwania: Kiedy chcę wyśrodkować div dla animowanego gif (kwadrat o rozmiarze 100 pikseli) używam:
źródło
Jeśli wolisz bez :
flexbox / grid / table
lub bez :
vertical-align: middle
Możesz to zrobić:
HTML
CSS
źródło
To powinno działać
źródło
Prosty ! Użyj flex wyświetlacza na pojemniku i auto margines na tekście !!!!
Demo: https://jsfiddle.net/ay95f08g/
Testowane: Safari, Chrome, Firefox i Opera na MacOs Mojave. (wszystkie ostatnie aktualizacje 25 lutego 2019 r.)
źródło
Wielu miało zrobić to samo. możesz użyć następującej metody, aby utworzyć div na środku strony.
Twoje zdrowie !
źródło
Najprostsze
flexbox
podejście:Najłatwiejszym sposobem wyśrodkowania pojedynczego elementu w pionie i poziomie jest uczynienie go elastycznym przedmiotem i ustawienie jego marginesu na
auto
:To rozszerzenie marginesów w każdym kierunku popchnie element dokładnie na środek jego pojemnika.
źródło