There exist various techniques to align images in CSS, like employing the object-position attribute or utilizing the float property (to position elements to the left or right).
By using the object-position property
The object-position attribute in CSS determines the positioning of the content inside the container. It works in conjunction with the object-fit attribute to determine the placement of an element such as an image or a video using x/y coordinates within its content box.
When employing the object-fit property, the initial setting for object-position is 50% 50%, meaning images are automatically centered within their content box. To customize the alignment, object-position property can be utilized.
Syntax
object-position: <position> | initial | inherit;
The location value of the object-position attribute determines the placement of a video or image within its container. It requires a pair of numerical values - the first for horizontal (x-axis) and the second for vertical (y-axis) positioning. Different strings like left, right, or center can also be applied for aligning the image within the container. Negative values are also supported for finer adjustments.
We can enhance our comprehension through the utilization of specific examples.
Example
In this instance, we are employing string values like "right top", "center top", and "left top" to align the image.
<!DOCTYPE html>
<head>
<title> CSS object-position property </title>
<style>
#center {
width: 400px;
height: 150px;
border: 5px solid red;
background-color: lightgreen;
object-fit: none;
object-position: center top;
}
#left {
width: 400px;
height: 150px;
border: 5px solid red;
background-color: lightgreen;
object-fit: none;
object-position: left top;
}
#right {
width: 400px;
height: 150px;
border: 5px solid red;
background-color: lightgreen;
object-fit: none;
object-position: right top;
}
</style>
</head>
<body>
<h3>object-position: center top;</h3>
<img id = "center" src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
<h3>object-position: left top;</h3>
<img id = "left" src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
<h3>object-position: right top;</h3>
<img id = "right" src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
</body>
</html>
Output
Now, here is an additional instance of utilizing the object-position attribute.
Example
In this instance, we are utilizing the default value to center-align the image. This default value is 50% for both horizontal and vertical positioning. Additionally, we are incorporating specific numerical dimensions of 200px and 100px.
<!DOCTYPE html>
<head>
<title> CSS object-position property </title>
<style>
#num {
width: 400px;
height: 250px;
border: 5px solid red;
background-color: lightgreen;
object-fit: none;
object-position: 200px 100px;
}
#init {
width: 400px;
height: 250px;
border: 5px solid red;
background-color: lightgreen;
object-fit: none;
object-position: initial;
}
</style>
</head>
<body>
<h3>object-position: 200px 100px;</h3>
<img id = "num" src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
<h3>object-position: initial;</h3>
<img id = "init" src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
</body>
</html>
Output
By using the float property
The CSS float attribute is a layout property that positions an element to either the left or right side, enabling adjacent elements to flow around it. Typically, it is applied in conjunction with images and page arrangements.
Elements are floated solely in a horizontal direction, allowing them to be floated either to the left or right, but not up or down. When an element is floated, it can be positioned as far left or right as the layout permits, essentially enabling it to be displayed at the far left or far right edges.
Let's consider an instance of utilizing the float attribute.
Example
<!DOCTYPE html>
<head>
<title> CSS float property </title>
<style>
#left {
float: left;
}
#right {
float: right;
}
</style>
</head>
<body>
<img id = "left" src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
<img id = "right" src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
</body>
</html>
Output