CSS ни помага да контролираме показването на изображения в уеб приложенията. Центрирането на изображения или текстове е често срещана задача в CSS. За да центрираме изображение, трябва да зададем стойността на margin-left и margin-right да се Автоматичен и го направете блоков елемент, като използвате дисплей: блок; Имот.
файлова система в linux
Ако изображението е в елемента div, тогава можем да използваме подравняване на текст: център; свойство за подравняване на изображението в центъра на div.
The елемент се казва, че е вграден елемент, който може лесно да бъде центриран чрез прилагане на подравняване на текст: център; свойство на CSS към родителския елемент, който го съдържа.
Забележка: Изображението не може да бъде центрирано, ако ширината е зададена на 100% (пълна ширина).
Можем да използваме свойството за стенограма марж и го настройте на Автоматичен за подравняване на изображението в центъра, вместо да използвате margin-left и margin-right Имот.
Нека видим как да центрираме изображение чрез прилагане подравняване на текст: център; свойство на своя родителски елемент.
Пример
В този пример ние подравняваме изображенията с помощта на подравняване на текст: център; Имот. Изображението е в елемента 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"> Тествайте сега Изход
Пример
Сега използваме margin-left: автоматично; margin-right: автоматично; и дисплей: блок; свойства за подравняване на изображението към центъра.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Тествайте сега Изход
