This article will demonstrate two methods of aligning an image to the right in CSS.
How to Align Image to Right in CSS?
In CSS, we will use the following properties to align an image to the right:
So, let’s get started with the first method.
Method 1: Use float Property to Align Image to Right in CSS
The CSS “float” property is used to control the position of an element. It decides whether the element will float on the right, left, or not in any way.
For the demonstration, we will provide an example to understand the working of the mentioned property.
Example
Here is a sample image aligned to the left by default. We will change the image position and align it to the right side:
To do so, specify the image src in the <body> tag of the HTML file:
To align the selected image to the right, we will set the value of “float” property as “right”:
After saving the given code, open the HTML file in your browser to view the result:
The above-given output indicated that we have successfully aligned the image to the right using CSS float property.
Method 2: Use display Property to Align Image to Right in CSS
In CSS, the “display” property determines the behavior of an element. It defines how an element will act in its specified place. You can also utilize the display property to set an image’s alignment as right.
Look at the below-given example to see how we can align an image to the right by utilizing the CSS display property.
Example
To align the image right in CSS, we will specify the “display” property value as “-webkit-box”. The -webkit-box value is used to set the content of any element in a particular direction. Moreover, the “margin-left” property of the selected image is also set as “auto” to give the left side a share of the remaining space:
Output
We have provided the essential instructions related to aligning images to the right using CSS properties.
Conclusion
To align an image to the right in CSS, you can use the “float” and “display” properties. For the mentioned purpose, the value of the float property is set as right, and the -webkit-box value of the display property will set the image’s alignment as right. In this article, the two simplest methods of aligning images to the right in CSS have been described. Both methods are efficient; utilize any of them according to your preferences.
