How to position an image in CSS?
There are many methods to position the image in CSS, such as using the object-position property, using the float property (for aligning the elements to the left or right).
By using the object-position property
The object-position property in CSS specifies the alignment of the content within the container. It is used with the object-fit property to define how an element like <video> or <img> is positioned with x/y coordinates in its content box.
When using the object-fit property, the default value for object-position is 50% 50%, so, by default, all images are positioned in the center of their content box. We can change the default alignment by using the object-position property.
Syntax
The position value of the object-position property defines the position of video or image inside the container. It accepts two numerical values, where the first value controls the x-axis, and the second value controls the y-axis. We can use the string such as left, right, or center, etc. for positioning the image in the container. It allows negative values.
We can understand it more clearly by using some examples.
Example
In this example, we are using the string values such as “right top”, “center top”, and “left top” to position the image.
Output
Now, there is another example of using the object-position property.
Example
In this example, we are using the initial value which positioned the image to center. It is because the initial sets the property to its default value which is 50% 50%. We are also using the numerical values 200px and 100px.
Output
By using the float property
The CSS float property is a positioning property used to push an element to the left or right, allowing other elements to wrap around it. Generally, it is used with images and layouts.
Elements are floated only horizontally. So it is possible only to float elements left or right, not up or down. A floated element may be moved as far to the left or the right as possible. Simply, it means that a floated element can display at the extreme left or extreme right.
Let’s take an example of using the float property.
Example
Output
