Mam problem, gdy próbuję wyśrodkować „produkty” bloku div, ponieważ nie znam z góry szerokości div. Czy ktoś ma rozwiązanie?
Aktualizacja: Mam problem z tym, że nie wiem, ile produktów będę wyświetlać, mogę mieć 1, 2 lub 3 produkty, mogę je wyśrodkować, jeśli byłby to stały numer, ponieważ wiedziałbym szerokość rodzica div, po prostu nie wiem, jak to zrobić, gdy treść jest dynamiczna.
.product_container {
text-align: center;
height: 150px;
}
.products {
height: 140px;
text-align: center;
margin: 0 auto;
clear: ccc both;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
<div class="product_container">
<div class="products" id="products">
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>
</div>
Odpowiedzi:
Aktualizacja 27 lutego 2015 r .: Moja pierwotna odpowiedź wciąż jest poddawana głosowaniu, ale teraz zamiast tego zwykle używam podejścia @ bobince.
Mój oryginalny post do celów historycznych:
Możesz spróbować tego podejścia.
Oto pasujący styl:
JSFiddle
Chodzi o to, abyś zawierał zawartość, którą chcesz wyśrodkować w dwóch divach, zewnętrznej i wewnętrznej. Przesuwasz oba divy tak, aby ich szerokości automatycznie zmniejszały się w celu dopasowania do treści. Następnie relatywnie ustawiasz div div z jego prawą krawędzią na środku kontenera. Na koniec, względnie pozycjonujesz wewnętrzny div w przeciwnym kierunku o połowę jego własnej szerokości (w rzeczywistości szerokość zewnętrznego div, ale są one takie same). Ostatecznie to centruje zawartość w dowolnym pojemniku, w którym się znajduje.
Państwo może trzeba, że pusty div na końcu, jeśli zależy na „produkt” treści do wielkości wysokość dla „product_container”.
źródło
overflow:hidden
do div będą nakładać się na inne pobliskie zawartość na prawo od niego. Wszelkie linki lub przyciski po prawej stronie nie będą działać. Wypróbuj kolor tła, aby zrozumieć potrzebę . To była sugerowana edycja autorstwa Cicila Thomasa.product_container
outer-center
outer-center
outer-center
overflow :hidden
Element z „display: block” (ponieważ div jest domyślnie) ma szerokość określoną przez szerokość kontenera. Nie można uzależnić szerokości bloku od szerokości jego zawartości (dopasowanie zmniejszone).
(Z wyjątkiem bloków, które są „zmiennoprzecinkowe: lewy / prawy” w CSS 2.1, ale nie nadaje się to do centrowania.)
Możesz ustawić właściwość „display” na „inline-block”, aby zmienić blok w obiekt dopasowany do rozmiaru, który może być kontrolowany przez właściwość wyrównywania tekstu jego rodzica, ale obsługa przeglądarki jest nierówna. Możesz przede wszystkim uciec, używając hacków (np. Patrz -moz-inline-stack), jeśli chcesz pójść tą drogą.
Innym sposobem są tabele. Może to być konieczne, gdy masz kolumny, których szerokości naprawdę nie można z góry poznać. Naprawdę nie potrafię powiedzieć, co próbujesz zrobić z przykładowego kodu - nie ma w tym nic oczywistego, co wymagałoby skurczu, aby dopasować blok - ale listę produktów można by uznać za tabelaryczną.
[PS. nigdy nie używaj „pt” dla rozmiarów czcionek w Internecie. „px” jest bardziej niezawodny, jeśli naprawdę potrzebujesz tekstu o stałym rozmiarze, w przeciwnym razie lepsze są jednostki względne, takie jak „%”. I „wyczyść: ccc oba” - literówka?]
JSFiddle
źródło
display: inline-block
nie jest obsługiwany w IE7 i starszych wersjach FirefoksaWiększość przeglądarek obsługuje
display: table;
regułę CSS. Jest to dobra sztuczka, aby wyśrodkować element div w kontenerze bez dodawania dodatkowego kodu HTML ani stosowania stylów ograniczających do kontenera (podobnie jak wtext-align: center;
przypadku wszystkich innych treści wstawianych w kontenerze) przy jednoczesnym zachowaniu dynamicznej szerokości zawartego elementu div:HTML:
CSS:
Pokaż fragment kodu
Aktualizacja (2015-03-09):
Właściwym sposobem na zrobienie tego dzisiaj jest użycie reguł Flexbox. Obsługa przeglądarki jest nieco bardziej ograniczona ( obsługa tabeli CSS vs. obsługa Flexbox ), ale ta metoda pozwala również na wiele innych rzeczy i jest dedykowaną regułą CSS dla tego typu zachowania:
HTML:
CSS:
Pokaż fragment kodu
źródło
display: table;
wariant jest idealny dla pseudoelementów (::before
,::after
), w których nie można dodawać dodatkowych znaczników i chcesz uniknąć zakłóceń w stylach sąsiednich elementów.sześć sposobów na skórowanie tego kota:
Przycisk pierwszy: cokolwiek typu
display: block
przyjmie pełną szerokość rodziców. (chyba że w połączeniu zfloat
lubdisplay: flex
rodzicem). Prawdziwe. Zły przykład.Przycisk 2: przejście
display: inline-block
spowoduje automatyczną (a nie pełną) szerokość. Następnie można wyśrodkować za pomocątext-align: center
bloku owijającego . Prawdopodobnie najłatwiejsza i najbardziej kompatybilna, nawet z przeglądarkami „vintage” ...Przycisk 3: Nie musisz niczego umieszczać na opakowaniu. Być może jest to najbardziej eleganckie rozwiązanie. Działa również pionowo. (Obsługa transtlate przez przeglądarkę jest obecnie wystarczająca (≥IE9) w dzisiejszych czasach ...).
Btw: Świetny sposób na pionowe centrowanie bloków o nieznanej wysokości (w połączeniu z absolutnym pozycjonowaniem).
Przycisk 4: Pozycjonowanie absolutne. Pamiętaj tylko, aby zarezerwować wystarczającą wysokość w opakowaniu, ponieważ nikt inny tego nie zrobi (ani poprawki, ani domniemania ...)
Przycisk 5: zmiennoprzecinkowy (który powoduje także dynamiczne szerokości elementów na poziomie bloku) i względne przesunięcie. Chociaż nigdy nie widziałem tego na wolności. Być może są wady ...
Aktualizacja: Przycisk 6: A w dzisiejszych czasach można również użyć Flex-Box. Pamiętaj, że style mają zastosowanie do opakowania wyśrodkowanego obiektu.
→ pełny kod źródłowy (składnia rysika)
źródło
Znalazłem bardziej eleganckie rozwiązanie, łącząc „wbudowany blok”, aby uniknąć używania float i hacky clear: oba. Nadal wymaga zagnieżdżonych div div, co nie jest bardzo semantyczne, ale po prostu działa ...
Mam nadzieję, że to pomoże!
źródło
Jeśli element docelowy jest ustawiony absolutnie, możesz go wyśrodkować, przesuwając go o 50% w jednym kierunku (
left: 50%
), a następnie przekształcając go o 50% w kierunku przeciwnym (transform:translateX(-50%)
). Działa to bez definiowania szerokości elementu docelowego (lub za pomocąwidth:auto
). Pozycja elementu nadrzędnego może być statyczna, bezwzględna, względna lub stała.źródło
Domyślnie
div
elementy są wyświetlane jako elementy blokowe, więc mają 100% szerokości, dzięki czemu ich centrowanie nie ma znaczenia. Jak sugeruje Arief, musisz określić a,width
a następnie możesz użyć goauto
podczas określaniamargin
, aby wyśrodkować adiv
.Alternatywnie możesz również wymusić
display: inline
, ale wtedy miałbyś coś , co właściwie zachowuje się jakspan
zamiastdiv
, więc nie ma to większego sensu.źródło
Spowoduje to wyśrodkowanie elementu, takiego jak lista uporządkowana, lista nieuporządkowana lub dowolny element. Wystarczy owinąć go Div z klasą outerElement i nadać elementowi wewnętrznemu klasę innerElement.
Klasa outerelement dla IE, starej Mozilli i większości nowszych przeglądarek.
źródło
użyj css3 flexbox z justify-content: center;
źródło
Nieznaczne różnice w odpowiedzi Mike'a M. Lin
Jeśli dodasz
overflow: auto;
(lubhidden
) dodiv.product_container
, nie potrzebujeszdiv.clear
.Wynika to z tego artykułu -> http://www.quirksmode.org/css/clearing.html
Oto zmodyfikowany HTML:
I tutaj jest zmodyfikowany CSS:
Powód, dla którego lepiej bez niego
div.clear
(poza tym, że posiadanie pustego elementu wydaje się niewłaściwe), jest nadgorliwe przydzielanie marginesów przez Firefox.Jeśli na przykład masz ten kod HTML:
Następnie Firefox (8.0 w punkcie piśmie), widać
11px
margines wcześniejproduct_container
. Co gorsza, otrzymasz pionowy pasek przewijania dla całej strony, nawet jeśli zawartość ładnie pasuje do wymiarów ekranu.źródło
Wypróbuj nowy css i znaczniki
Oto zmodyfikowany HTML:
I tutaj jest zmodyfikowany CSS:
źródło
Jeśli nie podasz „przepełnienie: ukryte” dla „.product_container”, div z „zewnętrznego centrum” nałoży się na inne znajdujące się w pobliżu treści po prawej stronie. Wszelkie linki lub przyciski po prawej stronie „zewnętrznego centrum” nie będą działać. Wypróbuj kolor tła dla „zewnętrznego centrum”, aby zrozumieć potrzebę „przepełnienia: ukryty”
źródło
Znalazłem ciekawe rozwiązanie, robiłem suwak i musiałem wyśrodkować sterowanie suwakiem, zrobiłem to i działa dobrze. Możesz także dodać pozycję względną do rodzica i przesunąć pozycję dziecka w pionie. Spójrz http://jsfiddle.net/bergb/6DvJz/
CSS:
HTML:
źródło
Zrób
display:table;
i ustawmargin
naauto
Ważna część kodu:
Bez względu na to, ile elementów masz teraz, automatycznie wyrówna się do środka
Przykład we fragmencie kodu:
Pokaż fragment kodu
źródło
Obawiam się, że jedynym sposobem na zrobienie tego bez wyraźnego określenia szerokości jest użycie tabel (wstrzymania oddechu).
źródło
Nędzne rozwiązanie, ale działa ...
CSS:
HTML:
źródło
Prosta poprawka, która działa w starych przeglądarkach (ale korzysta z tabel i wymaga ustawienia wysokości):
źródło
}
użyj przęsła istead wewnętrznych div
źródło
Wiem, że to pytanie jest stare, ale łamię sobie je. Bardzo podobny do odpowiedzi Bobina, ale z działającym przykładem kodu.
Niech każdy produkt będzie blokiem wbudowanym. Wyśrodkuj zawartość pojemnika. Gotowe.
http://jsfiddle.net/rgbk/6Z2Re/
Zobacz także: Wyśrodkuj bloki wbudowane o dynamicznej szerokości w CSS
źródło
Jest to jeden ze sposobów wyśrodkowania czegokolwiek w div, który nie zna wewnętrznej szerokości elementów.
źródło
moim rozwiązaniem było:
źródło
dodaj ten css do swojej klasy product_container
źródło