{"id":21256,"date":"2020-08-15T02:00:36","date_gmt":"2020-08-15T09:00:36","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=21256"},"modified":"2020-08-17T11:18:09","modified_gmt":"2020-08-17T18:18:09","slug":"css-center-image","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-center-image\/","title":{"rendered":"CSS Tricks &#8211; Centering an Image"},"content":{"rendered":"\n<p>Today we&#8217;ll try to center a <em>Susuwatari<\/em>. These <a href=\"https:\/\/en.wikipedia.org\/wiki\/Susuwatari\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">little creatures<\/a> commonly referred as &#8216;soots&#8217; like to move around a lot so we need to keep on still and center so we can take picture of one or more of them. Let&#8217;s do this!<\/p>\n\n\n\n<p>Note: As you read along, please refer to the <a href=\"https:\/\/github.com\/fbohz\/blogs_helper\/tree\/master\/css\/center-img\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">blog&#8217;s repo<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Adding Our Image to HTML<\/strong><\/h2>\n\n\n\n<p>The need for centering an image is very common. Let&#8217;s say we have our soot image and we add it with the conventional <code>image<\/code> tag:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;img class=&quot;soot&quot; src=&quot;soot.jpg&quot; alt=&quot;soot!&quot;&gt;<\/pre><\/div>\n\n\n\n<p>Don&#8217;t Forget: As you write your image tag have in mind that this tag cannot have any child nodes, that is why we don&#8217;t close it. Although your browser might not complain if you have a closing <code>&lt;\/img&gt;<\/code>, any CSS applied to it might not work. So just follow convention above.<\/p>\n\n\n\n<p>Now, as soon as we add our image without any CSS, the image will look like this in our page:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/8OFCPtuKNoa23q46qUNKoxVaT2G-vras_xEsPZyWPgb69nxCPl9IuCMPDCePHjJHvQeQUqSd-DecRIhFmk6EMVMzdZWRPwY1_kWdzITKeB2c3cnWanxFWVleaHRO932JrHkLJ_3j\" alt=\"Screen Shot 2020-08-09 at 4 08 17 PM\"\/><\/figure>\n\n\n\n<p>This is because our image is positioned accordingly to the default flow of the page, in this case on the left, same as our title.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Centering Method 1: <\/strong><strong>margin: 0 auto<\/strong><\/h2>\n\n\n\n<p>The easiest way to center our soot will be to apply the following styling to our <code>img<\/code> selector:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>img.soot {\n  margin: 0 auto;\n  display: block;\n}<\/pre><\/div>\n\n\n\n<p>Here we are adding the class name to our image selector for more specificity in case we add more soots, we need to ensure they are all centered.<\/p>\n\n\n\n<p>So now let&#8217;s check our page any yes, our image has been centered!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/3N3FxVQ_c2TBMcc4W7_MX5E9X1LO62E5S-df-83pzUBk0upOiT5AcVEaBvIdwGD2kbKIHpuckzzfIFDz33cXItQWe2U09LhhvMsynZ81Hk-8qHRSwWi2f4XL6sT4R_NGP8ChlZdz\" alt=\"Screen Shot 2020-08-09 at 4 22 11 PM\"\/><\/figure>\n\n\n\n<p>So what just happened?<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Our <code>margin<\/code> attribute can accept four parameters, the first two top and bottom and the other left and right. Here we are basically saying to the browser to determine the left and right margins, which in this case the browser sets them equal and thus the image is centered.<\/li><li>Our <code>display<\/code> property can have many values. In this case we choose &#8216;block&#8217; which basically tells the img element t<\/li><li>o take the whole width and on its own line. So when we apply the margin we ensure that it is applied to the whole image&#8217;s width so that is why it is centered.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Centering Method 2: <\/strong><strong>text-align: center;<\/strong><\/h2>\n\n\n\n<p>We could also center our soot by placing it inside of a parent element. Let&#8217;s say a div and then just do text-align on the parent. To align our image make sure you add it to the parent element (often referred as container element):<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>.container {\n    text-align: center;\n}<\/pre><\/div>\n\n\n\n<p>As our <code>div<\/code> element is by nature a block container, it will take the whole width and its children will be centered in this case our soot image!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>Pronouncing <em>Susuwatari<\/em> seems to be like a mouthful (just imagine saying it many times). At the other hand, centering images, it&#8217;s actually pretty easy right!<\/p>\n","protected":false},"excerpt":{"rendered":"Today we'll try to center a Susuwatari. These little creatures commonly referred as 'soots' like to move around a lot so we need to keep on still and center so we can take picture of one or more of them. Let's do this! Note: As you read along, please refer to the blog's repo. Adding&hellip;","protected":false},"author":86,"featured_media":20189,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-21256","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":[]},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Tricks - Centering an Image %<\/title>\n<meta name=\"description\" content=\"Learn how to center images using CSS. Two easy to learn methods are explained. Learn CSS with CareerKarma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-center-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Tricks - Centering an Image\" \/>\n<meta property=\"og:description\" content=\"Learn how to center images using CSS. Two easy to learn methods are explained. Learn CSS with CareerKarma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-center-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-15T09:00:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-17T18:18:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/john-salzarulo-Hl1stIQkVRw-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Felipe Boh\u00f3rquez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felipe Boh\u00f3rquez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-center-image\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-center-image\\\/\"},\"author\":{\"name\":\"Felipe Boh\u00f3rquez\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e2cbf72dcbfaf9e81a8b6a38c1bd4220\"},\"headline\":\"CSS Tricks &#8211; Centering an Image\",\"datePublished\":\"2020-08-15T09:00:36+00:00\",\"dateModified\":\"2020-08-17T18:18:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-center-image\\\/\"},\"wordCount\":462,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-center-image\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/john-salzarulo-Hl1stIQkVRw-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-center-image\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-center-image\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-center-image\\\/\",\"name\":\"CSS Tricks - Centering an Image %\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-center-image\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-center-image\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/john-salzarulo-Hl1stIQkVRw-unsplash.jpg\",\"datePublished\":\"2020-08-15T09:00:36+00:00\",\"dateModified\":\"2020-08-17T18:18:09+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e2cbf72dcbfaf9e81a8b6a38c1bd4220\"},\"description\":\"Learn how to center images using CSS. Two easy to learn methods are explained. Learn CSS with CareerKarma.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-center-image\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-center-image\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-center-image\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/john-salzarulo-Hl1stIQkVRw-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/john-salzarulo-Hl1stIQkVRw-unsplash.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-center-image\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Tricks &#8211; Centering an Image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e2cbf72dcbfaf9e81a8b6a38c1bd4220\",\"name\":\"Felipe Boh\u00f3rquez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Screen-Shot-2020-08-17-at-11.10.42-AM-150x150.png\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Screen-Shot-2020-08-17-at-11.10.42-AM-150x150.png\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/Screen-Shot-2020-08-17-at-11.10.42-AM-150x150.png\",\"caption\":\"Felipe Boh\u00f3rquez\"},\"description\":\"Felipe Boh\u00f3rquez is a Software Engineer and technical writer at Career Karma. He covers all things frontend and backend development.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/felipe-bohorquez\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Tricks - Centering an Image %","description":"Learn how to center images using CSS. Two easy to learn methods are explained. Learn CSS with CareerKarma.","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:\/\/careerkarma.com\/blog\/css-center-image\/","og_locale":"en_US","og_type":"article","og_title":"CSS Tricks - Centering an Image","og_description":"Learn how to center images using CSS. Two easy to learn methods are explained. Learn CSS with CareerKarma.","og_url":"https:\/\/careerkarma.com\/blog\/css-center-image\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-08-15T09:00:36+00:00","article_modified_time":"2020-08-17T18:18:09+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/john-salzarulo-Hl1stIQkVRw-unsplash.jpg","type":"image\/jpeg"}],"author":"Felipe Boh\u00f3rquez","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Felipe Boh\u00f3rquez","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-center-image\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-center-image\/"},"author":{"name":"Felipe Boh\u00f3rquez","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e2cbf72dcbfaf9e81a8b6a38c1bd4220"},"headline":"CSS Tricks &#8211; Centering an Image","datePublished":"2020-08-15T09:00:36+00:00","dateModified":"2020-08-17T18:18:09+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-center-image\/"},"wordCount":462,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-center-image\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/john-salzarulo-Hl1stIQkVRw-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-center-image\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-center-image\/","url":"https:\/\/careerkarma.com\/blog\/css-center-image\/","name":"CSS Tricks - Centering an Image %","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-center-image\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-center-image\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/john-salzarulo-Hl1stIQkVRw-unsplash.jpg","datePublished":"2020-08-15T09:00:36+00:00","dateModified":"2020-08-17T18:18:09+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e2cbf72dcbfaf9e81a8b6a38c1bd4220"},"description":"Learn how to center images using CSS. Two easy to learn methods are explained. Learn CSS with CareerKarma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-center-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-center-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-center-image\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/john-salzarulo-Hl1stIQkVRw-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/john-salzarulo-Hl1stIQkVRw-unsplash.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-center-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Tricks &#8211; Centering an Image"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e2cbf72dcbfaf9e81a8b6a38c1bd4220","name":"Felipe Boh\u00f3rquez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-17-at-11.10.42-AM-150x150.png","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-17-at-11.10.42-AM-150x150.png","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-17-at-11.10.42-AM-150x150.png","caption":"Felipe Boh\u00f3rquez"},"description":"Felipe Boh\u00f3rquez is a Software Engineer and technical writer at Career Karma. He covers all things frontend and backend development.","url":"https:\/\/careerkarma.com\/blog\/author\/felipe-bohorquez\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=21256"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21256\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/20189"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=21256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=21256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=21256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}