Czy można wyśrodkować element wbudowanego bloku, a jeśli tak, to w jaki sposób?

Mam element o początkowo nieznanej szerokości, w szczególności równanie MathJax dostarczone przez użytkownika. Mam element ustawiony jako inline-block, aby upewnić się, że szerokość elementu pasuje do jego zawartości i że ma określoną szerokość. Zapobiega to jednak tradycyjnym metodom centrowania. Oznacza to, że następujące nie działa:Czy można wyśrodkować element wbudowanego bloku, a jeśli tak, to w jaki sposób?

.equationElement 
{ 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
}

i roztwór nie może być:

.equationElement 
{ 
    display: block; 
    width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
}

bo nie mam pojęcia, co szerokość powinna być w rzeczywistości wcześniej i jeśli użytkownik kliknie na równaniu Potrzebuję podświetlonego całego równania, więc nie mogę ustawić szerokości na 0. Czy ktoś ma rozwiązanie, aby wyśrodkować to równanie?

Źródło

2011-09-29 Deets McGeets

nawiasem mówiąc, rejestracja wydaje Brok pl z Chrome na tej stronie. Nic się nie dzieje, jeśli kliknę przycisk Zarejestruj, z lub bez JavaScript. – phihag

Fascynujące! Używam Chrome i działa dobrze dla mnie. Z jakiego typu konta korzystasz? Google, Facebook, Twitter? –

myopenid. W 100% nie będzie działać w Google Chrome, jeśli JavaScript jest wyłączony. Przycisk nie ma nawet formularza i nie jest to przycisk przesyłania. – phihag

Wystarczy ustawić text-align: center; na pojemniku.

Here's a demo.

Źródło

2011-09-29 18:24:27 phihag

To jest świetny pomysł i działa, jeśli ustawię 'display: block', ale wtedy element zajmie szerokość jego kontenera lub będę musiał ustawić szerokość ręcznie, ale nie wiem, jaka będzie szerokość . Nie działa, jeśli element jest ustawiony jako 'inline-block'. Powodem, dla którego musi to być 'inline-block', jest to, że jego szerokość jest dynamiczna do zawartości. Dzięki za świetny pomysł. Jeśli możesz zmienić to tak, że działa dla 'bloku inline ', który byłby idealny. –

@Vivek Viswanathan Czy mógłbyś wyjaśnić, dlaczego "nie działa, jeśli element jest ustawiony jako blok inline"? Dodano [link] (http://phihag.de/2011/so/inline-block-center.html) na stronę demonstracyjną. – phihag

To wydaje się działać, ponieważ 'text-align: center' jest ustawiony na elemencie nadrzędnym. Jednak nie mogę tego zrobić w moim kodzie, ponieważ element 'inline-block' ma rodzeństwo, którego nie można wyśrodkować. Jeszcze raz dziękuję za pomoc w tej sprawie. –

Innym sposobem, aby to zrobić (działa dla elementu również zablokować):

.center-horizontal { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
}

Objaśnienie: left: 50% będzie pozycjonować element począwszy od środka zawierającego rodzica, więc chcesz odciągnij ją o o połowę swojej szerokości z transformacją: translateX (-50%)

Uwaga1: Pamiętaj, aby ustawić pozycję zawierającą rodzic na pozycję: względna; gdy dominująca jest całkowicie umieszczona umieścić szerokość 100%, a wzrost, 0 wyściółkę i margines div wewnątrz niego i nadaje jej położenie: relative

Uwaga 2: Może być również zmodyfikowany do pionowej centrowania z

top:50%; 
transform: translateY(-50%);

Źródło

2015-12-03 17:02:53 Ivek

ten jest niesamowity! – metahamza

Nie potrzebujesz "absolutnego" pozycjonowania i możesz użyć 'margin: 50%;' – Kevin

Nie potrzebujesz absolutu, ale lewo/prawo nie zadziała, jeśli pozycja jest "statyczna" (pozycjonowanie elementów domyślnych). Jeśli 'absolute' nie jest specyficzną potrzebą, powinieneś użyć' relative' –

Nieco późno, ale podobna do odpowiedzi Ivek użytkownika, można uniknąć stosując deklarację position za pomocą margin-left zamiast left, więc:

margin-left: 50%; transform: translateX(-50%);

Źródło

2017-10-05 16:47:07

Czy można wyśrodkować element wbudowanego bloku, a jeśli tak, to w jaki sposób?

Odpowiedz

Powiązane problemy