{"id":3086,"date":"2020-10-26T04:05:23","date_gmt":"2020-10-26T09:05:23","guid":{"rendered":"https:\/\/cssnewbie.com\/?p=2586"},"modified":"2022-07-15T06:31:03","modified_gmt":"2022-07-15T06:31:03","slug":"how-to-center-an-image-in-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-center-an-image-in-css\/","title":{"rendered":"How To Center An Image In CSS"},"content":{"rendered":"
\n
\"\"<\/figure><\/div>\n\n

\u00a0<\/p>\n

A picture speaks a thousand words.<\/p>\n

ThoughtMechanics<\/a> 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.<\/p>\n

Images are the major ingredient of modern webpages. Without using them the page isn\u2019t eye-catching. Using the right image to express adds value to the content of the page.<\/p>\n

We shall learn how to achieve it using CSS. We will use the margin-right & margin-left <\/em>property to center the image with values in both the property set to auto. <\/em>But the important property is display <\/em>which treats the image as a block element and that helps us move the image around the webpage. The value of the display <\/em>property shall be set as \u201cblock\u201d. Remember this is the important property for aligning the image.<\/p>\n

Let\u2019s have a look with the help of a code.<\/p>\n

HTML Code:<\/p>\n

<html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title> How to center an image <\/title>\n<link rel= \"style-sheet\" href= \"centerimage.css\">\n<\/head>\n<body>\n<h2> How to Center an Image <\/h2>\n<p> The image has been added and it is in the center because margin-left and right are set to auto. <\/p>\n<img src=\"https:\/\/cdn.pixabay.com\/photo\/2020\/09\/09\/13\/03\/bike-riding-5557589_960_720.png\" alt=\"Paris\" style=\"width:50%;\">\n<\/body>\n<\/html><\/pre>\n
CSS Filename: centerimage.css<\/p>\n
img {\n\ndisplay: block;\n\nmargin-left: auto;\n\nmargin-right: auto;<\/pre>\n
}<\/pre>\n
Here’s what the output will be:<\/p>\n
\"How<\/p>\n
See Also:\u00a0CSS Centering (Text and Images) with Angular 11 Example<\/a><\/strong><\/h3>\n
How To Create Rounded Images<\/h3>\n
Modern webpages show the profile images inside a circle. I\u2019m sure you would have noticed it. Well, to achieve it on our webpage we use the border-radius <\/em>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.<\/p>\n
Let’s take a look:<\/p>\n
The HTML code will be as follows:-<\/p>\n
<html>\n<head>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\u00a0 <title> How to create rounded images <\/title>\n\u00a0 <link rel=\"stylesheet\" href=\"roundedimage.css\">\n<\/head>\n\n<body>\n<h2>Rounded Images<\/h2>\n<img src=\"https:\/\/cdn.pixabay.com\/photo\/2020\/08\/12\/09\/42\/dog-5482171_960_720.jpg\" alt=\"Avatar\" style=\"width:200px\" id=\"i1\">\n<img src=\"https:\/\/cdn.pixabay.com\/photo\/2020\/08\/12\/09\/42\/dog-5482171_960_720.jpg\" alt=\"Avatar\" style=\"width:200px\" id=\"i2\">\n<\/body>\n<\/html>\n<\/pre>\n
CSS File:Roundedimage.css<\/p>\n
#i1 {\n  border-radius: 50%;\n  margin-left: 100px;\n}\n\n#i2 {\n  margin-left: 250px;\n}\n<\/pre>\n
The output of the above code will be as follows:<\/p>\n
\"Center<\/p>\n
How To Border And Center An Image<\/h3>\n
Now let us learn how to use the property border<\/em> to create a border around the image which can be styled to give a look like a photo-frame. The values of border <\/em>used here are \u201c10px\u201d which gives the thickness of the border, \u201csolid\u201d defines the type of border & \u201cgreen\u201d 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.<\/p>\n
HTML Code:<\/p>\n
<html>\n<head>\n  <title> How to add border to the image <\/title>\n  <link rel= \"stylesheet\" href= \"borderimage.css\">\n<\/head>\n\n<body>\n  <h2> Border Around Image <\/h2>\n  <p> Using the border property to create a border around the image.<\/p>\n  <img src=\"https:\/\/cdn.pixabay.com\/photo\/2020\/08\/16\/23\/22\/hills-5494021_960_720.jpg\" alt=\"Snow\">\n<\/body>\n<\/html>\n<\/pre>\n
CSS File:Borderimage.css<\/p>\n
img {\n  border: 10px solid green;\n  display: block;\n  margin-right: auto;\n  margin-left: auto;\n  width: 350px;\n}<\/pre>\n
Here’s what the output will be:<\/p>\n
\"Center<\/p>\n
\u00a0<\/p>\n
Conclusion:<\/h3>\n
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<\/a>.<\/p>\n
To keep learning such CSS codes, you can subscribe to our blog<\/a>!<\/p>\n
Here are some other filters and effects that can be added to an image in CSS:<\/p>\n
Using Images as Backgrounds with CSS3<\/a><\/p>\n
How To Alter Images Using CSS Filters<\/a><\/p>\n
Create a Flash Effect on Images on Hover Using CSS3<\/a><\/p>
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
\u00a0<\/p>\n
A picture speaks a thousand words.<\/p>\n
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.<\/p>\n
Images are the […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[183],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3086"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3086"}],"version-history":[{"count":3,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3086\/revisions"}],"predecessor-version":[{"id":3468,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3086\/revisions\/3468"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}