Как выровнять изображение по правому краю в CSS
html3 месяца назад
от Sharqa Hameed
Изображения считаются визуальной формой для передачи ваших сообщений или идей в веб-приложениях. Однако они полезны только в том случае, если находятся в правильном положении. Иногда изображения находятся не на своем месте, и требуется их выравнивание. Различные свойства CSS могут помочь вам в выравнивании изображений.
В этой статье будут показаны два метода выравнивания изображения по правому краю в CSS.
Как выровнять изображение по правому краю в CSS?В CSS мы будем использовать следующие свойства для выравнивания изображения по правому краю:
- свойство float
- свойство отображения
Итак, приступим к первому способу.
Способ 1. Использование свойства float для выравнивания изображения по правому краю в CSS Свойство CSS « float » используется для управления положением элемента.
Он решает, будет ли элемент плавать справа, слева или нет.
Для демонстрации мы приведем пример, чтобы понять работу упомянутого свойства.
Пример
Вот пример изображения, выровненного по левому краю по умолчанию. Мы изменим положение изображения и выровняем его по правому краю:
Для этого укажите исходный код изображения в теге HTML-файла:
Чтобы выровнять выделенное изображение по правому краю, установим значение « float ” свойство как “ right ”:
После сохранения данного кода откройте файл HTML в браузере, чтобы просмотреть результат: Плавающее свойство CSS.
Способ 2. Использование свойства display для выравнивания изображения по правому краю в CSS В CSS свойство « display » определяет поведение элемента.
Он определяет, как элемент будет действовать в указанном месте. Вы также можете использовать свойство display, чтобы установить правильное выравнивание изображения.
Посмотрите на приведенный ниже пример, чтобы увидеть, как мы можем выровнять изображение по правому краю, используя свойство CSS display.
Пример
Чтобы выровнять изображение по правому краю в CSS, мы укажем значение свойства « display » как «9».0011 -webkit-box ». Значение -webkit-box используется для установки содержимого любого элемента в определенном направлении. Кроме того, свойство « margin-left » выбранного изображения также устанавливается как « auto », чтобы дать левой стороне долю оставшегося пространства:
Вывод
Мы предоставили основные инструкции, связанные с выравниванием изображений по правому краю с помощью свойств CSS.
Чтобы выровнять изображение по правому краю в CSS, вы можете использовать свойства « float » и « display ». Для указанной цели значение свойства float установлено как правильное, а значение -webkit-box свойства display установит правильное выравнивание изображения. В этой статье были описаны два простейших метода выравнивания изображений по правому краю в CSS. Оба метода эффективны; используйте любой из них в соответствии с вашими предпочтениями.
Об авторе
Sharqa Hameed
Я энтузиаст Linux, я люблю читать каждый блог Linux в Интернете. У меня есть степень магистра в области компьютерных наук, и я увлечен обучением и преподаванием.
Посмотреть все сообщения
Как центрировать изображение по горизонтали и вертикали с помощью HTML и CSS
25 марта 2021 г. 26 марта 2021 г.
Существует три способа центрирования изображения в HTML с помощью свойств CSS — text-align , margin и flex
Table of Contents
Text-align
Это общее свойство CSS, которое мы используем для выравнивания текста по центру в элементе.
Мы можем использовать его для изображения, чтобы сделать его центральным по горизонтали.
раздел {
выравнивание текста: по центру;
} <дел>
<дел>
Мы можем центрировать как текст, так и изображение с помощью text-align: center
Flex
Вы также можете центрировать изображение, используя свойства flex.
раздел {
дисплей: гибкий;
выравнивание содержимого: по центру;
} <дел>
tldevtech.com/wp-content/uploads/2020/09/sword_blue2.png" />
