/ / <input> z display: blok wewnątrz wyrównywania tekstu: center div - html, css

<input> z wyświetlaczem: blok wewnątrz wyrównania tekstu: center div - html, css

Z tym:

<div id="parentdiv" style="text-align:center;width:600px;margin:auto;">
<input type="button" value="push me" />
</div>

Przycisk jest wyrównany do środka okna przeglądarki (zgodnie z potrzebami) w FF, Chrome, IE7 i IE8.

Ale dodaj „display: block” do przycisku:

<div id="parentdiv" style="text-align:center;width:600px;margin:auto;">
<input type="button" style="display:block;" value="push me" />
</div>

Przycisk jest wyrównany do środka w IE7 - i jest nie jest wyrównany do centrum w FF, Chrome i IE8.

Czemu? Czy przycisk (lub dowolny <input>) z wyświetlaczem: blok może być w jakiś sposób wyrównany do środka? (poza używaniem <center> - które działa we wszystkich wymienionych przeglądarkach, btw - ale jest „zabronione” ...)

Odpowiedzi:

10 dla odpowiedzi № 1

W ten sposób może działać:

<input type="button" style="width:100px;margin:0 auto;display:block;" value="push me" />

Aby wymusić wyśrodkowanie bloku (pierwotnie wyświetlanego: elementu śródliniowego), musisz ustawić stałą szerokość, a następnie margines na 0 auto;)


1 dla odpowiedzi nr 2

z standard css:

Ta właściwość opisuje, jak wbudowana zawartość bloku jest wyrównana w poziomie

więc kiedy twoje elementy (bez względu na to, czym są,divy, rozpiętości, wejścia itp.) są wbudowane, wyrównywanie tekstu ma na nie wpływ, a gdy są one wyświetlane: blok, w standardowej definicji, wyrównanie tekstu nie wyrówna ich

możesz to naprawić ustawiając margines: 0 auto i ustalając szerokość, jak sugeruje steweb, lub alternatywnie (w zależności od specyficznych wymagań):

<input type="button" style="display:inline-block;" value="push me" />

0 dla odpowiedzi № 3

Elementy wyświetlane jako bloki są wyśrodkowane z marginesami automatycznymi. The text-align nieruchomość powinna tylko centrum dzieci inline. Internet Explorer ma błędy związane z tym.