{"id":565,"date":"2025-11-16T18:54:00","date_gmt":"2025-11-16T16:54:00","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=565"},"modified":"2025-11-19T14:36:12","modified_gmt":"2025-11-19T12:36:12","slug":"image-align-center","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/image-align-center\/","title":{"rendered":"How To Align an HTML Image To The Center?"},"content":{"rendered":"

Positioning and aligning images on an HTML page is crucial to layout the page. One of the most common questions is how to align an image to the center of a section. In this article we’re going to discuss many possible ways of placing images to the center.<\/p>\n

\"center
\n
\nI applied a thin grey border to the wrapping sections to make them visible.<\/p>\n

See the online demos and the source codes below. You can also open the developer tools of your web browser and inspect the elements.<\/p>\n

In a paragraph<\/h2>\n

In the first example I’m going to present you how to position an image to the center of a container element, like a div, a paragraph or any other tag.<\/p>\n

\n\t\"centered<\/p>\n

<p<\/span> class<\/span>=\"aligncenter\"<\/span>><\/span>\n    <img<\/span> src<\/span>=\"image.jpg\"<\/span> alt<\/span>=\"centered image\"<\/span> \/><\/span>\n<\/p<\/span>><\/span>\n<\/pre>\n
<style<\/span>>\n.aligncenter<\/span> {\n    text-align<\/span>: center<\/span>;\n}\n<\/style<\/span>>\n<\/pre>\n
I used the text-align: center;<\/em> CSS property to do the job. If you are familiar with the CSS code<\/a> then this shouldn’t need more explanation.<\/p>\n
With margins<\/h2>\n
We can assign margin: auto;<\/em> style to a block element to center it. But we know that image tags are inline<\/a>, not block elements so we have to assign a display: block;<\/em> CSS style to make it work.<\/p>\n
\n\t\"demo<\/div>\n
<div<\/span>><\/span>\n    <img<\/span> class<\/span>=\"marginauto\"<\/span> src<\/span>=\"image.jpg\"<\/span> alt<\/span>=\"centered image\"<\/span> \/><\/span>\n<\/div<\/span>><\/span>\n<\/pre>\n
<style<\/span>>\n.marginauto<\/span> {\n    margin<\/span>: 10px<\/span><\/span> auto<\/span> 20px<\/span><\/span>;\n    display<\/span>: block<\/span>;\n}\n<\/style<\/span>>\n<\/pre>\n
<center> tag<\/h2>\n
The <center> tag is obsolete<\/a> which means that it’s no longer supported in HTML5<\/a> but it’s still supported by the web browsers like Google Chrome<\/a>.
\nThis used to be a preferred method because it didn’t require style sheets, but plain HTML only.
\nI don’t want to use outdated elements in my article so I’m not including a demo for this example.<\/p>\n
<center<\/span>><\/span>\n    <img<\/span> src<\/span>=\"\/image.jpg\"<\/span> alt<\/span>=\"centered image\"<\/span> \/><\/span>\n<\/center<\/span>><\/span>\n<\/pre>\n
align=middle tag attribute<\/h2>\n
Another obsolete method which didn’t require CSS, similar to the previous example. In older versions of HTML we could center an image assigning the align<\/span>=“middle”<\/span> tag attribute.<\/p>\n
<img<\/span> align<\/span>=\"middle\"<\/span> src<\/span>=\"image.jpg\"<\/span> alt<\/span>=\"myimage\"<\/span> \/><\/span>\n<\/pre>\n
Align an image center vertically<\/h2>\n
We have discussed above how to align an image horizontally but there might be cases when you need to center it vertically.
\nTo accomplish this we have to take two steps. The wrapping element needs to be displayed as table cell and the vertical-align has to be set to middle<\/em>. In my example I’m setting a fixed height to the container to make sure it’s higher than our picture.<\/p>\n
\n\t\"html<\/div>\n
<div<\/span> class<\/span>=\"verticalcenter\"<\/span>><\/span>\n    <img<\/span> src<\/span>=\"image.jpg\"<\/span> alt<\/span>=\"centered image\"<\/span> \/><\/span>\n<\/div<\/span>><\/span>\n<\/pre>\n
<style<\/span>>\n.verticalcenter<\/span> {\n    display<\/span>: table-cell;\n    height<\/span>: 400px<\/span><\/span>;\n    vertical-align<\/span>: middle<\/span>;\n}\n<\/style<\/span>>\n<\/pre>\n
Both horizontal and vertical centering<\/h2>\n
We can combine the horizontal and vertical alignment as demonstrated below.<\/p>\n
\n\t\"sample<\/div>\n
<div<\/span> class<\/span>=\"verticalhorizontal\"<\/span>><\/span>\n    <img<\/span> src<\/span>=\"image.jpg\"<\/span> alt<\/span>=\"centered image\"<\/span> \/><\/span>\n<\/div<\/span>><\/span>\n<\/pre>\n
<style<\/span>>\n.verticalhorizontal<\/span> {\n    display<\/span>: table-cell;\n    height<\/span>: 300px<\/span><\/span>;\n    text-align<\/span>: center<\/span>;\n    width<\/span>: 300px<\/span><\/span>;\n    vertical-align<\/span>: middle<\/span>;\n}\n<\/style<\/span>>\n<\/pre>\n
I hope you’ve learned today something new reading this article and you are going to use them in your upcoming templates and designs<\/a>.<\/p>\n
Be a tech-savvy web developer\/designer by migrating your web development\/designing environment into the cloud to access it remotely from anywhere on any device(PC\/Mac\/android\/iOS) with high performance hosted citrix xendesktop from CloudDesktopOnline at an affordable xendesktop cost<\/a>. If you`re looking for a reliable cloud platform to fulfill your needs, Try out Azure managed services<\/a> from Apps4Rent with 24*7*365 live tech-support.
\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Positioning and aligning images on an HTML page is crucial to layout the page. One of the most common questions is how to align an image to the center of a section. In this article we’re going to discuss many possible ways of placing images to the center.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,2,4],"tags":[],"class_list":["post-565","post","type-post","status-publish","format-standard","hentry","category-articles","category-css","category-html"],"yoast_head":"\nHow To Align an HTML Image To The Center? Vertical & Horizontal<\/title>\n<meta name=\"description\" content=\"questions is how to align an image to the center of a section. In this article we discuss many possible ways of placing images to the center.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/image-align-center\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Align an HTML Image To The Center? Vertical & Horizontal\" \/>\n<meta property=\"og:description\" content=\"questions is how to align an image to the center of a section. In this article we discuss many possible ways of placing images to the center.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/image-align-center\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-16T16:54:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-19T12:36:12+00:00\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/image-align-center\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/image-align-center\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"How To Align an HTML Image To The Center?\",\"datePublished\":\"2025-11-16T16:54:00+00:00\",\"dateModified\":\"2025-11-19T12:36:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/image-align-center\/\"},\"wordCount\":483,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"articleSection\":[\"Articles\",\"CSS\",\"HTML\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/image-align-center\/\",\"url\":\"https:\/\/html-online.com\/articles\/image-align-center\/\",\"name\":\"How To Align an HTML Image To The Center? Vertical & Horizontal\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"datePublished\":\"2025-11-16T16:54:00+00:00\",\"dateModified\":\"2025-11-19T12:36:12+00:00\",\"description\":\"questions is how to align an image to the center of a section. In this article we discuss many possible ways of placing images to the center.\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/image-align-center\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/image-align-center\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/image-align-center\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Align an HTML Image To The Center?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Align an HTML Image To The Center? Vertical & Horizontal","description":"questions is how to align an image to the center of a section. In this article we discuss many possible ways of placing images to the center.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/html-online.com\/articles\/image-align-center\/","og_locale":"en_GB","og_type":"article","og_title":"How To Align an HTML Image To The Center? Vertical & Horizontal","og_description":"questions is how to align an image to the center of a section. In this article we discuss many possible ways of placing images to the center.","og_url":"https:\/\/html-online.com\/articles\/image-align-center\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2025-11-16T16:54:00+00:00","article_modified_time":"2025-11-19T12:36:12+00:00","author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/image-align-center\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/image-align-center\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"How To Align an HTML Image To The Center?","datePublished":"2025-11-16T16:54:00+00:00","dateModified":"2025-11-19T12:36:12+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/image-align-center\/"},"wordCount":483,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"articleSection":["Articles","CSS","HTML"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/image-align-center\/","url":"https:\/\/html-online.com\/articles\/image-align-center\/","name":"How To Align an HTML Image To The Center? Vertical & Horizontal","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"datePublished":"2025-11-16T16:54:00+00:00","dateModified":"2025-11-19T12:36:12+00:00","description":"questions is how to align an image to the center of a section. In this article we discuss many possible ways of placing images to the center.","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/image-align-center\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/image-align-center\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/image-align-center\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"How To Align an HTML Image To The Center?"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=565"}],"version-history":[{"count":2,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/565\/revisions"}],"predecessor-version":[{"id":2120,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/565\/revisions\/2120"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}