In this tutorial we will show you the solution of how to center an image in CSS, when it comes to working with images, many developers struggle. It's especially difficult to manage responsiveness and alignment, especially when we want to put the image at the centre of the page.
The alignment of items on a page plays a big role in achieving balance on your website. Centring components, especially large ones like photographs, can help your design appear more orderly and attractive to the eye.
So, in this tutorial, we'll show you how to use CSS attributes to centre an image.
Step By Step Guide On How To Center An Image In CSS :-
CSS allows us to customise how images are displayed in online applications. In CSS, centring pictures or phrases is a typical activity. To the centre, an image set the margin-left and margin-right values to auto and use the display: block; attribute to make it a block element.
If the image is in a div element, the text-align: centre; property can be used to align the image to the div's centre.
In the following code, we have written down the code for aligning the image at the centre which is included in the div element.
<!DOCTYPE html>
<html>
<head>
<style>
<title></title>
#img {
text-align: center;
}
</style>
</head>
<body>
<div id ="img">
<img src="img/abc.jpg">
</div>
</body>
</html>
- To begin, type <! DOCTYPE html> tells the web browser that the file is in HTML format.
- The <html> element, on the other hand, is used to signal the start of HTML content.
- The <head> tag now contains the information about web pages. The <title> element is used in this tag to provide a web page title. A good example of paired tags is the< head> and <title> tags. As a result, both have the </head> and </title> closing tags.
- Next, make sure you've set up an assets directory (folder) to contain the photos you'll need for your project. For example, in the project we're working on, we've created an img folder and added an image called abc.jpg that we want to use.
- The image was then placed below the HTML element by defining its path in the Body using the text-align CSS property and the alignment centre. You can also use an absolute path, which is a full web address that starts with a domain URL (http://www.) to add photos.
- The <body> element is used to define the content of a webpage. This is where all of the stuff for the website will be written.
- Use the </body> and </html> tags to close the< body> and <html> tags, respectively.
Conclusion :-
With a little coding knowledge, you may use centre aligned images, captions, and buttons to create a sense of symmetry and balance on your website.
As a web developer, you'll frequently need to align images thus we've covered distinct CSS approaches for doing so. Other methods of centring exist, but we have covered the most prevalent one.
I hope this tutorial on how to center an image in CSS helps you figure out how to align your images in the centre of the page.
About Pragati
