CSS pomaga nam kontrolować wyświetlanie obrazów w aplikacjach internetowych. Centrowanie obrazów lub tekstów jest częstym zadaniem w CSS. Aby wyśrodkować obraz, musimy ustawić wartość lewy margines I prawy margines Do automatyczny i uczyń go elementem blokowym za pomocą metody Blok wyświetlacza; nieruchomość.
Jeśli obraz znajduje się w elemencie div, możemy użyć elementu wyrównanie tekstu: do środka; właściwość służąca do wyrównywania obrazu do środka w div.
The Mówi się, że element jest elementem wbudowanym, który można łatwo wyśrodkować, stosując opcję wyrównanie tekstu: do środka; właściwość CSS do elementu nadrzędnego, który ją zawiera.
Uwaga: Obrazu nie można wyśrodkować, jeśli szerokość jest ustawiona na 100% (pełna szerokość).
Możemy skorzystać z własności skróconej margines i ustaw to automatyczny do wyrównywania obrazu do środka, zamiast używać lewy margines I prawy margines nieruchomość.
Zobaczmy, jak wyśrodkować obraz, stosując wyrównanie tekstu: do środka; właściwość do elementu nadrzędnego.
Przykład
W tym przykładzie wyrównujemy obrazy za pomocą wyrównanie tekstu: do środka; nieruchomość. Obraz znajduje się w elemencie div.
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> Przetestuj teraz Wyjście
Przykład
Teraz używamy tzw margines po lewej: auto; prawy margines: auto; I Blok wyświetlacza; właściwości wyrównywania obrazu do środka.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Przetestuj teraz Wyjście
