Próbuję wyśrodkować pionowo element span
lub div
element w innym div
elemencie. Jednak kiedy mówię vertical-align: middle
, nic się nie dzieje. Próbowałem zmienić display
właściwości obu elementów i wydaje się, że nic nie działa.
Oto, co aktualnie robię na mojej stronie internetowej:
.main {
height: 72px;
vertical-align: middle;
border: 1px solid black;
padding: 2px;
}
.inner {
vertical-align: middle;
border: 1px solid red;
}
.second {
border: 1px solid blue;
}
<div class="main">
<div class="inner">
This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
</div>
Oto jsfiddle implementacji pokazujący, że nie działa: http://jsfiddle.net/gZXWC/
Za pomocą CSS3:
Css:
Uwaga: To może nie działać w starych IE
źródło
inline-flex
aby mieć wiele elementów w rzędzie wewnątrz elementu wewnętrznego..inner { width: 100%; }
. W ten sposób wydaje się, że działa podobnie,.outer { display: table; } .inner { display: table-cell; vertical-align: middle; }
ale nie wymusza minimalnej szerokości.justify-content: center;
wyrównywałem poziomo, co działało świetnieWypróbuj to, działa dla mnie bardzo dobrze:
źródło
#element span {height:100%;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
- zwróć uwagę, że wysokość jest ważna, aby upewnić się, że rozpiętość dziedziczy pełną wysokość kontenera (prawdopodobnie div) w przeciwnym razie nadal nie uzyskasz centrowania pionowego!box
wdisplay
Działa również ustawienie wysokości linii na tej samej wysokości, co zawiera div
DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/
źródło
line-height
zmieni również wysokość elementu wewnętrznego. b) Element wewnętrzny nadal nie jest dokładnie wyśrodkowany pionowo. c) Nie działa na elementach, które nie zawierają tekstu, na przykład:<img>
lub elementach o stałej wysokości.Jeśli nie możesz polegać na Flexbox ... Umieść go
.child
w.parent
środku. Działa, gdy rozmiary pikseli są nieznane (innymi słowy zawsze) i nie ma również problemów z IE9 +.źródło
Powinieneś założyć
vertical-align: middle
element wewnętrzny, a nie element zewnętrzny. Ustawline-height
właściwość na elemencie zewnętrznym, aby pasowała doheight
właściwości elementu zewnętrznego. Następnie ustawdisplay: inline-block
iline-height: normal
na elemencie wewnętrznym. W ten sposób tekst na elemencie wewnętrznym zostanie zawinięty z normalną wysokością linii. Działa w Chrome, Firefox, Safari i IE 8+Skrzypce
źródło
line-height: normal;
idisplay:inline;
też działa. Zaletą tej metody jest to, że nie przeszkadza, ztext-align:center;
którym używaniedisplay: table-cell;
może powodować problemy. Dość często chcemy wyrównywać zarówno poziomo, jak i pionowo. Zobacz to zredagowane skrzypce: jsfiddle.net/br090prs/36line-height: normal
idisplay: inline-block
jest tak, że tekst wewnętrzny zawinie się poprawnie. Jeśli masz pewność, że tekst w wewnętrznej div nigdy się nie zawinie, to te właściwości nie będą konieczne.Użyłem tego, aby wyrównać wszystko na środku div otoki opakowania, na wypadek, gdyby komukolwiek to pomogło - uznałem to za najprostsze:
źródło
Oto przykład dwóch sposobów wyrównywania w pionie. Używam ich i działają całkiem dobrze. Jeden wykorzystuje pozycjonowanie bezwzględne, a drugi korzysta z Flexbox .
Przykład wyrównywania w pionie
Używając flexbox, możesz wyrównać element wewnątrz innego elementu za
display: flex;
pomocąalign-self
. Jeśli chcesz wyrównać go również w poziomie, możesz użyćalign-items
iwjustify-content
pojemniku.Jeśli nie chcesz używać Flexboksa, możesz użyć właściwości position. Jeśli uczynisz kontener względnym, a zawartość absolutnym, zawartość będzie mogła swobodnie się poruszać wewnątrz kontenera. Więc jeśli użyjesz
top: 0;
ileft: 0;
w treści, zostanie ona umieszczona w lewym górnym rogu kontenera.Następnie, aby go wyrównać, wystarczy zmienić górne i lewe odniesienia na 50%. Spowoduje to umieszczenie zawartości w centrum kontenera od lewego górnego rogu zawartości.
Musisz to poprawić, tłumacząc zawartość o połowę mniejszą w lewo i górę.
źródło
tutaj jest świetny artykuł o tym, jak wyrównać wertykalnie .. Podoba mi się pływak.
http://www.vanseodesign.com/css/vertical-centering/
HTML:
I odpowiedni styl:
źródło
HTML
CSS
Ustawiamy div rodzica, aby wyświetlał się jako tabela, a div potomny, aby wyświetlał się jako komórka tabeli. Następnie możemy użyć wyrównania w pionie na div div dziecka i ustawić jego wartość na środkową. Wszystko wewnątrz tego div dziecka będzie wyśrodkowane pionowo.
źródło
To proste. Po prostu dodaj
display:table-cell
w swojej głównej klasie.Sprawdź to jsfiddle !
źródło
Oto najnowsze najprostsze rozwiązanie - nie musisz niczego zmieniać, po prostu dodaj trzy linie reguł CSS do swojego kontenera div, na którym chcesz się skoncentrować. Uwielbiam
Flex Box
#LoveFlexBoxPremia
justify-content
wartość można ustawić w kilku następujących opcji:flex-start
, która wyrówna div div do miejsca, w którym rozpoczyna się przepływ flex w jego kontenerze nadrzędnym. W takim przypadku pozostanie na wierzchu.center
, który wyrówna div dziecka do środka kontenera nadrzędnego. To jest naprawdę fajne, ponieważ nie trzeba dodawać dodatkowego div, aby owinąć wszystkie dzieci, aby umieścić opakowanie w pojemniku nadrzędnym, aby wyśrodkować dzieci. Z tego powodu jest to prawdą centrum pionowe (wcolumn
flex-direction
. Podobnie, jeśli zmieniszflow-direction
sięrow
, że staną się poziomo wycentrowany.flex-end
, który wyrówna div div do miejsca, w którym Flex Flex kończy się w jego kontenerze nadrzędnym. W takim przypadku przesunie się na dół.space-between
, który rozprzestrzeni wszystkie dzieci od początku przepływu do końca przepływu. Jeśli to demo, dodałem kolejny div div, aby pokazać, że są one rozłożone.space-around
, podobnie jakspace-between
, ale z połową miejsca na początku i na końcu przepływu.źródło
Ponieważ
vertical-align
działa zgodnie z oczekiwaniami natd
, możesz umieścić jedną komórkętable
w,div
aby wyrównać jego zawartość.Clunky, ale działa, o ile wiem. Może nie mieć wad innych obejść.
źródło
Wystarczy umieścić zawartość w tabeli o wysokości 100% i ustawić wysokość dla głównego div
źródło
Aby pionowo wyśrodkować element przęsła lub elementu div w obrębie innego elementu div, dodaj pozycję względem elementu div elementu nadrzędnego i pozycję absolutną do elementu div elementu podrzędnego. Teraz element div elementu podrzędnego można ustawić w dowolnym miejscu wewnątrz elementu div. Przykład poniżej centruje element poziomo i pionowo.
css:
źródło
Jest to nowoczesne podejście i wykorzystuje funkcję CSS Flexbox. Możesz teraz wyrównać zawartość w pionie w kontenerze nadrzędnym, po prostu dodając te style do
.main
konteneraI jesteś gotowy, aby iść!
źródło