A picture speaks a thousand words.
ThoughtMechanics explains the importance of images in a webpage and how they can impact your views, ideas, and perceptions. Thus, while learning web development it is important to learn how to format images.
Images are the major ingredient of modern webpages. Without using them the page isn’t eye-catching. Using the right image to express adds value to the content of the page.
We shall learn how to achieve it using CSS. We will use the margin-right & margin-left property to center the image with values in both the property set to auto. But the important property is display which treats the image as a block element and that helps us move the image around the webpage. The value of the display property shall be set as “block”. Remember this is the important property for aligning the image.
Let’s have a look with the help of a code.
HTML Code:
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> How to center an image </title> <link rel= "style-sheet" href= "centerimage.css"> </head> <body> <h2> How to Center an Image </h2> <p> The image has been added and it is in the center because margin-left and right are set to auto. </p> <img src="https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_960_720.png" alt="Paris" style="width:50%;"> </body> </html>
CSS Filename: centerimage.css
img {
display: block;
margin-left: auto;
margin-right: auto;
}
Here’s what the output will be:
See Also: CSS Centering (Text and Images) with Angular 11 Example
How To Create Rounded Images
Modern webpages show the profile images inside a circle. I’m sure you would have noticed it. Well, to achieve it on our webpage we use the border-radius property with different values. We will have a look with two same images side-by-side. One using the property and the other without. The style attribute used in the img tag sets the width of the image to 20px and the id given to img tag will help in differentiating the shape of the image.
Let’s take a look:
The HTML code will be as follows:-
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> How to create rounded images </title> <link rel="stylesheet" href="roundedimage.css"> </head> <body> <h2>Rounded Images</h2> <img src="https://cdn.pixabay.com/photo/2020/08/12/09/42/dog-5482171_960_720.jpg" alt="Avatar" style="width:200px" id="i1"> <img src="https://cdn.pixabay.com/photo/2020/08/12/09/42/dog-5482171_960_720.jpg" alt="Avatar" style="width:200px" id="i2"> </body> </html>
CSS File:Roundedimage.css
#i1 {
border-radius: 50%;
margin-left: 100px;
}
#i2 {
margin-left: 250px;
}
The output of the above code will be as follows:
How To Border And Center An Image
Now let us learn how to use the property border to create a border around the image which can be styled to give a look like a photo-frame. The values of border used here are “10px” which gives the thickness of the border, “solid” defines the type of border & “green” adds color to the thickness defined earlier. You can replace these values by appropriate ones to get the desired change. Further, other properties used here are to center the image after converting it as a block element.
HTML Code:
<html> <head> <title> How to add border to the image </title> <link rel= "stylesheet" href= "borderimage.css"> </head> <body> <h2> Border Around Image </h2> <p> Using the border property to create a border around the image.</p> <img src="https://cdn.pixabay.com/photo/2020/08/16/23/22/hills-5494021_960_720.jpg" alt="Snow"> </body> </html>
CSS File:Borderimage.css
img {
border: 10px solid green;
display: block;
margin-right: auto;
margin-left: auto;
width: 350px;
}
Here’s what the output will be:
Conclusion:
In this tutorial, we have learned how to center an image at first using margin-right & left properties. We also learned how to round the image and how to add a border to the image. You can change the values and shall see a variety of possible borders and different sizes of rounded images. You can write your own code and explore different styles at CodePen.
To keep learning such CSS codes, you can subscribe to our blog!
Here are some other filters and effects that can be added to an image in CSS:
Using Images as Backgrounds with CSS3