Zasadniczo chcę wyśrodkować tekst, ignorując wszelkie pływające elementy rodzeństwa.CSS: Jak mogę wyśrodkować tekst mimo pływającego elementu obok niego?
Początkowo myślałem, że to nie będzie problem, ponieważ miałem wrażenie, że element pływający nie bierze od szerokości żadnych elementów rodzeństwa.
Example (chcę być czerwony tekst na środku niebieską ramką, mimo zielonego tekstu)
Jak to najlepiej osiągnąć?
Nie możesz. Jeśli byłby wyśrodkowany w ramce nadrzędnej, wówczas zmienna w pewnym momencie nałożyłaby się na treść, co mogłoby pokonać punkt pływaka. Istnieją dwa podejścia, które możesz wykorzystać tutaj. Jeśli znasz szerokość float, możesz zastosować równy ujemny prawy margines. W przeciwnym razie możesz całkowicie ustawić element like this.
Oto link do ryba roboczego: http://jsfiddle.net/cD657/3/
(w przykładzie, został otwarty <span> i zamknął ją </div>)
Zrobiłem to div i dał mu margin: 0px auto; i szerokość. - wymyślono, aby wykonać tę sztuczkę:
Ale kiedy nie masz ustalonej szerokości? Zasadniczo nie możesz tego zrobić, gdy nie znasz szerokości jednego z elementów: pływającego lub tekstu, który chcesz wyśrodkować. Właśnie natknąłem się na ten problem i szukałem rozwiązania bez szczęścia. Mam przycisk i tekst, oba w tym samym DIV. Chcę, aby przycisk był wyrównany do lewej strony, a tekst do centrum rodzica (DIV). Próbowałem z absolutnym pozycjonowaniem na przycisku i wyrównaniem tekstu: środek na div rodzica i zadziałało, ale potem, gdy tekst jest większy, to pójdzie za przyciskiem :( – Adrian
Możesz zachować tak, jak masz, ale po prostu dodając wypełnienie po przeciwnej stronie z tą samą wartością pikseli co szerokość elementu pływającego.
.parent{
text-align: center;
}
.centered.element{
padding-left: [width of floating element]px;
}
.floating.element{
float: left;
}
Aby znaleźć szerokość łatwo wystarczy użyć Developer Tools w każdej nowoczesnej przeglądarce Inspect element.
See skrzypce tutaj: http://jsfiddle.net/cD657/369/
Uwaga: ta może nie działać, jeśli skupione element ma przypisany background kolor.
Jedyną inną opcją, o której mogę myśleć, jest zrobienie obiekt o identycznej wielkości (na przykład niewidoczny "div") i unoś go na przeciwną stronę kontenera nadrzędnego (zawierającego inny denerwujący element pływający) .To lepsze niż użycie marginesu do zrównoważenia centrowania, ponieważ obiekt pływający wpłynie na centrowanie tekstu nawet jeśli nie w tym samym pojemniku, co tekst Myśli, działa świetnie dla mnie – Slink
Podobał mi się twój pomysł: w przeciwnym razie możesz całkowicie ustawić element w ten sposób: –
tak, pozycjonowanie bezwzględnego wewnątrz względnego to tylko sztuczka – Fanky