Przejdź do treści

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>.

Zobacz więcej...

  • CSS
    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...

  • CSS
    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>.

★★★★★ 5/5 (296)

Facebook