Jak wyśrodkować "inline-block"? - Kurs HTML i CSS
Jak wyśrodkować "inline-block"?
Aby wyśrodkować element inline-block wewnątrz jego kontenera, można użyć właściwości CSS "text-align
: center" dla kontenera. To spowoduje wyśrodkowanie elementu poziomo wewnątrz kontenera. Na przykład: <div style="text-align: center"> <span style="display: inline-block">Wyśrodkowany element</span> </div>
.
- Rozmiary / Szerokość i marginesy automatyczne
...Jeśli zarówno 'margin-left' jaki i 'margin-right' posiadają wartość auto, oznacza to, że ich ostateczna szerokość będzie taka sama. Pozwala to wyśrodkować w poziomie element względem krawędzi bloku obejmującego. Przykład: Następujący kod: <div style="width: 600px"> <div style="margin-left: auto; width: 400px; margin-right: auto">...</div> </div> Pozwala wycentrować wewnętrzny blok o szerokości 400px. Marginesy - lewy i prawy - uzyskają taką samą wartość ostateczną: (600 - 400) / 2...
- Pozycjonowanie / Wyświetlanie {display}
...inline-block zachowują się jak elementy blokowe, ale nadal są wyświetlane w jednej linii, a można dla nich ustawić szerokość i wysokość. Jak wyśrodkować "inline-block"? Aby wyśrodkować element inline-block wewnątrz jego kontenera, można użyć właściwości CSS "text-align: center" dla kontenera. To spowoduje wyśrodkowanie elementu poziomo wewnątrz kontenera. Na przykład: <div style="text-align: center"> <span style="display: inline-block">Wyśrodkowany element</span> </div>.