[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"blog:post:how-to-center-an-image-in-css-5-reliable-methods":37,"blog:page:1":195},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},[],{"data":38},{"id":39,"title":40,"slug":41,"excerpt":42,"author":43,"categories":49,"featured_image":51,"reading_time_minutes":55,"meta_title":5,"meta_description":42,"og_image":5,"meta_robots":56,"schema_type":57,"faq_json":5,"video_url":5,"toc_json":58,"published_at":128,"updated_at":128,"content":129,"related":130},7,"How to Center an Image in CSS (5 Reliable Methods)","how-to-center-an-image-in-css-5-reliable-methods","Learn how to center an image in CSS with margin, text-align, Flexbox, Grid, and absolute positioning, plus fixes for when centering silently fails.",{"slug":44,"display_name":45,"job_title":5,"short_bio":5,"expertise_tags":46,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":47,"posts":48},"badar-khalil","Badar Khalil",[],[],[],[50],{"name":9,"slug":10},{"url":52,"alt_text":5,"width":53,"height":54},"https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fblog\u002Ffeatured\u002Fcenter-image-css.webp",1200,628,11,[],"Article",[59,63,67,71,75,79,83,87,91,95,99,124],{"id":60,"text":61,"level":12,"children":62},"the-quickest-way-to-center-an-image-in-css","The Quickest Way to Center an Image in CSS",[],{"id":64,"text":65,"level":12,"children":66},"center-an-image-horizontally-with-css","Center an Image Horizontally With CSS",[],{"id":68,"text":69,"level":12,"children":70},"center-an-image-with-flexbox","Center an Image With Flexbox",[],{"id":72,"text":73,"level":12,"children":74},"center-an-image-with-css-grid","Center an Image With CSS Grid",[],{"id":76,"text":77,"level":12,"children":78},"keep-a-centered-image-responsive","Keep a Centered Image Responsive",[],{"id":80,"text":81,"level":12,"children":82},"center-an-image-both-horizontally-and-vertically","Center an Image Both Horizontally and Vertically",[],{"id":84,"text":85,"level":12,"children":86},"center-an-image-with-absolute-positioning","Center an Image With Absolute Positioning",[],{"id":88,"text":89,"level":12,"children":90},"why-is-my-image-not-centering","Why Is My Image Not Centering?",[],{"id":92,"text":93,"level":12,"children":94},"which-css-method-should-you-use-to-center-an-image","Which CSS Method Should You Use to Center an Image?",[],{"id":96,"text":97,"level":12,"children":98},"common-mistakes-when-centering-images-in-css","Common Mistakes When Centering Images in CSS",[],{"id":100,"text":101,"level":12,"children":102},"faq-about-centering-images-in-css","FAQ About Centering Images in CSS",[103,108,112,116,120],{"id":104,"text":105,"level":106,"children":107},"what-is-the-easiest-way-to-center-an-image-in-css","What is the easiest way to center an image in CSS?",3,[],{"id":109,"text":110,"level":106,"children":111},"how-do-i-center-an-image-horizontally-in-css","How do I center an image horizontally in CSS?",[],{"id":113,"text":114,"level":106,"children":115},"how-do-i-center-an-image-vertically-in-css","How do I center an image vertically in CSS?",[],{"id":117,"text":118,"level":106,"children":119},"why-is-margin-auto-not-centering-my-image","Why is margin: auto not centering my image?",[],{"id":121,"text":122,"level":106,"children":123},"should-i-use-flexbox-or-grid-to-center-an-image","Should I use Flexbox or Grid to center an image?",[],{"id":125,"text":126,"level":12,"children":127},"the-short-version","The Short Version",[],"2026-09-11T17:50:53+00:00","\u003Cp>Type \"center image css\" into a search bar and you'll get a dozen answers that all sound right and half of them won't work for your layout. That's not because the advice is bad, it's because an \u003Ccode><img>\u003C\u002Fcode> tag doesn't behave like a \u003Ccode><div>\u003C\u002Fcode>. It's inline by default, which quietly breaks the most commonly copy-pasted fix before you've even hit save.\u003C\u002Fp>\u003Cp>Here's the short version: an image is a replaced element with a default \u003Ccode>display\u003C\u002Fcode> value of \u003Ccode>inline\u003C\u002Fcode>, though its box behaves like \u003Ccode>inline-block\u003C\u002Fcode> because it has intrinsic width and height. That single fact is why \u003Ccode>margin: auto\u003C\u002Fcode> sometimes does nothing. It's also why \u003Ccode>text-align: center\u003C\u002Fcode> sometimes works great, and why the \"right\" technique depends on what's already happening in the surrounding layout.\u003C\u002Fp>\u003Cp>This guide walks through every reliable way to center an image in CSS. That includes the one-line fix for most cases, the classic and modern horizontal techniques, Flexbox and Grid for full control over both axes, and absolute positioning for overlays. It also covers why your image might not be centering at all, since that's usually a five-minute fix once you know what to check.\u003C\u002Fp>\u003Ch2 id=\"the-quickest-way-to-center-an-image-in-css\">The Quickest Way to Center an Image in CSS\u003C\u002Fh2>\u003Cp>For a standalone image that just needs to sit in the middle of its container, this is the fastest working combination:\u003C\u002Fp>\u003Cp>html\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"photo-wrapper\">\n  <img src=\"mountain-sunset.jpg\" alt=\"Mountain range at sunset\" class=\"centered-img\">\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>css\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.centered-img {\n  display: block;\n  width: 100%;\n  max-width: 400px;\n  margin-inline: auto;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Three things are doing the work here. \u003Ccode>display: block\u003C\u002Fcode> overrides the image's default inline behavior so it becomes a block-level box that occupies its own line. \u003Ccode>margin-inline: auto\u003C\u002Fcode> (the modern, direction-aware equivalent of \u003Ccode>margin: 0 auto\u003C\u002Fcode>) then splits whatever horizontal space is left over evenly between the left and right sides.\u003C\u002Fp>\u003Cp>That last part is the one people miss: there has to be leftover space for \u003Ccode>auto\u003C\u002Fcode> to distribute. \u003Ccode>width: 100%\u003C\u002Fcode> combined with \u003Ccode>max-width: 400px\u003C\u002Fcode> means the image tries to be as wide as its container but is capped at 400px. On any container wider than 400px, that gap gives \u003Ccode>margin-inline: auto\u003C\u002Fcode> something to split.\u003C\u002Fp>\u003Cp>Leave off \u003Ccode>max-width\u003C\u002Fcode> and the image simply renders at \u003Ccode>width: 100%\u003C\u002Fcode> instead. It then fills the entire container, so there's nothing left to center it within. The \"centered\" image just looks like a normal full-width image, because visually, it is one.\u003C\u002Fp>\u003Ch2 id=\"center-an-image-horizontally-with-css\">Center an Image Horizontally With CSS\u003C\u002Fh2>\u003Cp>To understand why some techniques work and others don't, it helps to know what an image does by default. According to \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fimg\">MDN's documentation on the \u003C\u002Fa>\u003Ccode><img>\u003C\u002Fcode>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fimg\"> element\u003C\u002Fa>, an image is a replaced element with a \u003Ccode>display\u003C\u002Fcode> value of \u003Ccode>inline\u003C\u002Fcode> by default. Its dimensions, though, are governed by the image's own intrinsic size, which makes it behave like \u003Ccode>inline-block\u003C\u002Fcode> for layout purposes. Practically, that means an image sits in the flow of text like a very wide letter. Centering techniques built for block-level elements need a small adjustment before they'll apply to it.\u003C\u002Fp>\u003Cp>\u003Cstrong>The traditional approach\u003C\u002Fstrong>, \u003Ccode>margin: 0 auto\u003C\u002Fcode>, is a block-level technique. It requires two things to actually move the image. First, a \u003Ccode>display: block\u003C\u002Fcode> (or \u003Ccode>inline-block\u003C\u002Fcode>, though block is more common). Second, a defined \u003Ccode>width\u003C\u002Fcode> or \u003Ccode>max-width\u003C\u002Fcode> that's smaller than the available space.\u003C\u002Fp>\u003Cp>css\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">img.hero-photo {\n  display: block;\n  width: 60%;\n  margin: 0 auto;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>The other common approach\u003C\u002Fstrong>, \u003Ccode>text-align: center\u003C\u002Fcode>, works differently and needs to be placed on the image's \u003Cem>parent\u003C\u002Fem>, not the image itself.\u003C\u002Fp>\u003Cp>css\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.article-body {\n  text-align: center;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>html\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"article-body\">\n  <img src=\"diagram.png\" alt=\"Process diagram\">\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>This works because \u003Ccode>text-align\u003C\u002Fcode> centers inline-level content within a block container, and an image is inline-level by default, so it qualifies. Putting \u003Ccode>text-align: center\u003C\u002Fcode> directly on the \u003Ccode><img>\u003C\u002Fcode> tag does nothing useful, though. The property affects how an element aligns \u003Cem>its own\u003C\u002Fem> inline content, and an image has no text or inline children inside it to align. Its position is controlled by its parent's \u003Ccode>text-align\u003C\u002Fcode>, not its own.\u003C\u002Fp>\u003Cp>The trade-off: \u003Ccode>text-align: center\u003C\u002Fcode> also centers any actual text sitting next to the image in that same container, which is sometimes exactly what you want and sometimes not. If the container needs to hold other left-aligned content alongside the centered image, \u003Ccode>margin: 0 auto\u003C\u002Fcode> on a block-level image is the more surgical choice.\u003C\u002Fp>\u003Ch2 id=\"center-an-image-with-flexbox\">Center an Image With Flexbox\u003C\u002Fh2>\u003Cp>Flexbox is the better fit once the image lives inside a component that already controls its own layout, like a card, a hero banner, or a profile widget. It centers the image without touching the image's own \u003Ccode>display\u003C\u002Fcode> value at all.\u003C\u002Fp>\u003Cp>html\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"profile-card\">\n  <img src=\"avatar.jpg\" alt=\"User profile photo\" class=\"avatar\">\n  <h3>Jordan Ellis<\u002Fh3>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>css\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.profile-card {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>align-items: center\u003C\u002Fcode> centers the image along the cross axis. In a column-direction flex container like the one above, that's the horizontal axis, which is why \u003Ccode>align-items\u003C\u002Fcode> rather than \u003Ccode>justify-content\u003C\u002Fcode> is doing the horizontal centering here. If the container is left as the default \u003Ccode>flex-direction: row\u003C\u002Fcode>, \u003Ccode>justify-content: center\u003C\u002Fcode> handles horizontal centering instead, and \u003Ccode>align-items: center\u003C\u002Fcode> takes care of vertical centering. Swapping which property does which job is one of the most common Flexbox mix-ups, and it's worth double-checking \u003Ccode>flex-direction\u003C\u002Fcode> any time the centering seems to land on the wrong axis.\u003C\u002Fp>\u003Ch2 id=\"center-an-image-with-css-grid\">Center an Image With CSS Grid\u003C\u002Fh2>\u003Cp>Grid solves the same problem in fewer declarations, particularly useful when the image is the only thing that needs centering inside its container:\u003C\u002Fp>\u003Cp>css\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.gallery-frame {\n  display: grid;\n  place-items: center;\n  height: 300px;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>place-items: center\u003C\u002Fcode> is shorthand for \u003Ccode>align-items\u003C\u002Fcode> and \u003Ccode>justify-items\u003C\u002Fcode> together, centering the grid item on both axes in a single line, without needing to know which axis is \"main\" or \"cross\" the way Flexbox requires.\u003C\u002Fp>\u003Cp>Grid tends to be the better fit once the surrounding layout involves actual rows and columns, like a photo gallery, rather than a single image sitting alone in a wrapper. For one image with no other layout requirements, Flexbox and Grid are functionally interchangeable, so the choice usually comes down to whatever method the rest of the component already uses. Vertical centering with either method still needs the parent to have real height to center within. A container with \u003Ccode>height: auto\u003C\u002Fcode> and no content to define its size has nothing to center the image against vertically.\u003C\u002Fp>\u003Ch2 id=\"keep-a-centered-image-responsive\">Keep a Centered Image Responsive\u003C\u002Fh2>\u003Cp>A centered image that overflows its container on a smaller screen isn't actually finished. The standard fix pairs a flexible maximum width with an automatic height:\u003C\u002Fp>\u003Cp>css\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.responsive-img {\n  display: block;\n  max-width: 100%;\n  height: auto;\n  margin-inline: auto;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>max-width: 100%\u003C\u002Fcode> stops the image from ever exceeding the width of its parent, regardless of the image's actual file dimensions. \u003Ccode>height: auto\u003C\u002Fcode> then lets the browser scale the height proportionally as the width shrinks, which keeps the image's aspect ratio intact instead of stretching or squashing it.\u003C\u002Fp>\u003Cp>That's the difference between a fixed \u003Ccode>width\u003C\u002Fcode> and a flexible \u003Ccode>max-width\u003C\u002Fcode> in practice. A fixed pixel width, like \u003Ccode>width: 800px\u003C\u002Fcode>, stays 800px even on a 375px-wide phone screen, forcing horizontal scroll or an overflow clip. \u003Ccode>max-width: 100%\u003C\u002Fcode> scales down gracefully instead, capping the image at its natural size or the container's size, whichever is smaller.\u003C\u002Fp>\u003Ch2 id=\"center-an-image-both-horizontally-and-vertically\">Center an Image Both Horizontally and Vertically\u003C\u002Fh2>\u003Cp>Horizontal and vertical centering are genuinely separate problems, and it's worth treating them that way instead of hoping one technique quietly handles both. A horizontal-only fix, like \u003Ccode>margin-inline: auto\u003C\u002Fcode>, has no vertical component at all. Giving an element top-and-bottom margins of \u003Ccode>auto\u003C\u002Fcode> does nothing unless the parent is already a flex or grid container.\u003C\u002Fp>\u003Cp>Flexbox handles both axes at once when the image sits inside a section that has real height:\u003C\u002Fp>\u003Cp>css\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.hero-section {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Grid does the same job with less code:\u003C\u002Fp>\u003Cp>css\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.hero-section {\n  display: grid;\n  place-items: center;\n  min-height: 100vh;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>min-height\u003C\u002Fcode> matters more than it looks like it should. A fixed \u003Ccode>height: 100vh\u003C\u002Fcode> clips anything taller than the viewport, while \u003Ccode>min-height: 100vh\u003C\u002Fcode> lets the section grow if the image (or any sibling content) needs more room. Either way, the parent needs a real, non-zero height for vertical centering to have any space to work with. Centering something inside a container that's only as tall as its content is a contradiction the browser can't resolve.\u003C\u002Fp>\u003Ch2 id=\"center-an-image-with-absolute-positioning\">Center an Image With Absolute Positioning\u003C\u002Fh2>\u003Cp>Absolute positioning is the right tool when an image needs to break out of the normal page flow entirely, most often for overlays, badges, watermarks, or an image layered on top of other content.\u003C\u002Fp>\u003Cp>html\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"card\">\n  <img src=\"badge.png\" alt=\"Featured badge\" class=\"overlay-badge\">\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>css\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.card {\n  position: relative;\n}\n\n.overlay-badge {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Ccode>top: 50%\u003C\u002Fcode> and \u003Ccode>left: 50%\u003C\u002Fcode> place the image's top-left corner at the exact center of its containing block. \u003Ccode>transform: translate(-50%, -50%)\u003C\u002Fcode> then pulls it back by half of its own width and height, landing it precisely centered no matter what size the image actually is. This is the one technique on this list that works without knowing the image's dimensions in advance.\u003C\u002Fp>\u003Cp>For this to behave correctly, \u003Ccode>.card\u003C\u002Fcode> needs \u003Ccode>position: relative\u003C\u002Fcode>. An absolutely positioned element sizes and positions itself against the nearest ancestor with a position value other than \u003Ccode>static\u003C\u002Fcode>, its \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FContaining_block\">containing block\u003C\u002Fa>. Skip that step, and the image centers against the entire page instead of the card it's supposed to sit inside.\u003C\u002Fp>\u003Cp>For normal, in-flow content, though, absolute positioning is usually more than the job needs. It pulls the image out of the document flow completely, which means it stops taking up space and can end up overlapping surrounding text or elements that weren't expecting it. Flexbox or Grid centers an in-flow image with far less risk of that kind of layout collision.\u003C\u002Fp>\u003Ch2 id=\"why-is-my-image-not-centering\">Why Is My Image Not Centering?\u003C\u002Fh2>\u003Cp>Most centering failures trace back to one of a handful of causes. Work through these in order before assuming the technique itself is broken:\u003C\u002Fp>\u003Ctable>\u003Ctbody>\u003Ctr>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Symptom\u003C\u002Fp>\u003C\u002Fth>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Likely Cause\u003C\u002Fp>\u003C\u002Fth>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Fix\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>margin: auto\u003C\u002Fcode> doing nothing\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Image is still \u003Ccode>display: inline\u003C\u002Fcode> (its default)\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Add \u003Ccode>display: block\u003C\u002Fcode> or \u003Ccode>display: inline-block\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>margin: auto\u003C\u002Fcode> still doing nothing after adding \u003Ccode>display: block\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>No \u003Ccode>width\u003C\u002Fcode> or \u003Ccode>max-width\u003C\u002Fcode> set, so the image fills all available space\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Add a \u003Ccode>width\u003C\u002Fcode>, \u003Ccode>max-width\u003C\u002Fcode>, or percentage smaller than the container\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>text-align: center\u003C\u002Fcode> isn't working\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Applied to the image itself instead of its parent\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Move it to the containing element\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Flexbox\u002FGrid centers the wrong axis\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>flex-direction: column\u003C\u002Fcode> swaps which property centers which axis\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Swap \u003Ccode>justify-content\u003C\u002Fcode> and \u003Ccode>align-items\u003C\u002Fcode>, or check \u003Ccode>flex-direction\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Vertical centering isn't happening\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Parent container has no defined height\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Add \u003Ccode>height\u003C\u002Fcode>, \u003Ccode>min-height\u003C\u002Fcode>, or confirm the parent has real height\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Image centers against the wrong element\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Absolutely positioned without a \u003Ccode>position: relative\u003C\u002Fcode> ancestor\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Add \u003Ccode>position: relative\u003C\u002Fcode> to the intended parent\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Image overflows its container\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Fixed pixel \u003Ccode>width\u003C\u002Fcode> instead of \u003Ccode>max-width\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Swap to \u003Ccode>max-width: 100%\u003C\u002Fcode> with \u003Ccode>height: auto\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"which-css-method-should-you-use-to-center-an-image\">Which CSS Method Should You Use to Center an Image?\u003C\u002Fh2>\u003Ctable>\u003Ctbody>\u003Ctr>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Situation\u003C\u002Fp>\u003C\u002Fth>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Recommended Method\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Simple standalone image, horizontal only\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>display: block\u003C\u002Fcode> + \u003Ccode>margin-inline: auto\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Image sitting among text content\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>text-align: center\u003C\u002Fcode> on the parent\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Image inside a component that controls its own layout\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Flexbox\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Image inside a grid-based layout (gallery, dashboard)\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>CSS Grid\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Full-page or hero image, both axes\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Flexbox or Grid with \u003Ccode>min-height: 100vh\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Overlay, badge, or layered image\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Absolute positioning with \u003Ccode>transform\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>None of these is the universally \"correct\" one. The right pick depends on three things: whether the parent already controls layout, whether the image needs to stay in the document flow, and whether it needs to break out of that flow entirely. Layout-controlled parents favor Flexbox or Grid. In-flow images favor margin or text-align. Anything that needs to sit outside normal flow, like an overlay, calls for absolute positioning.\u003C\u002Fp>\u003Ch2 id=\"common-mistakes-when-centering-images-in-css\">Common Mistakes When Centering Images in CSS\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp>Applying \u003Ccode>text-align: center\u003C\u002Fcode> directly to the \u003Ccode><img>\u003C\u002Fcode> tag instead of its parent, where it has no effect.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Adding \u003Ccode>margin: auto\u003C\u002Fcode> without first setting \u003Ccode>display: block\u003C\u002Fcode>, so the image never leaves its inline default.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Setting an image to \u003Ccode>width: 100%\u003C\u002Fcode> and then wondering why \u003Ccode>margin: auto\u003C\u002Fcode> isn't visibly doing anything, there's no leftover space to distribute.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Assuming horizontal centering automatically handles vertical centering too; they're separate problems with separate fixes.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Forgetting \u003Ccode>max-width: 100%\u003C\u002Fcode> and \u003Ccode>height: auto\u003C\u002Fcode>, so a centered image still overflows on smaller screens.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Reaching for absolute positioning on ordinary in-flow content, which pulls the image out of the layout and risks overlapping other elements.\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"faq-about-centering-images-in-css\">FAQ About Centering Images in CSS\u003C\u002Fh2>\u003Ch3 id=\"what-is-the-easiest-way-to-center-an-image-in-css\">\u003Cstrong>What is the easiest way to center an image in CSS?\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cp>For a single, standalone image, \u003Ccode>display: block\u003C\u002Fcode> combined with \u003Ccode>margin-inline: auto\u003C\u002Fcode> (or the older \u003Ccode>margin: 0 auto\u003C\u002Fcode>) is the simplest reliable fix, as long as the image has a \u003Ccode>width\u003C\u002Fcode> or \u003Ccode>max-width\u003C\u002Fcode> smaller than its container.\u003C\u002Fp>\u003Ch3 id=\"how-do-i-center-an-image-horizontally-in-css\">\u003Cstrong>How do I center an image horizontally in CSS?\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cp>Give the image a \u003Ccode>display: block\u003C\u002Fcode> and a constrained width, then apply \u003Ccode>margin-inline: auto\u003C\u002Fcode>. Alternatively, apply \u003Ccode>text-align: center\u003C\u002Fcode> to the image's parent and leave the image's own \u003Ccode>display\u003C\u002Fcode> value untouched.\u003C\u002Fp>\u003Ch3 id=\"how-do-i-center-an-image-vertically-in-css\">\u003Cstrong>How do I center an image vertically in CSS?\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cp>Vertical centering needs the parent to have defined height. Set the parent to \u003Ccode>display: flex\u003C\u002Fcode> with \u003Ccode>align-items: center\u003C\u002Fcode>, or \u003Ccode>display: grid\u003C\u002Fcode> with \u003Ccode>place-items: center\u003C\u002Fcode>, and give the parent a \u003Ccode>height\u003C\u002Fcode> or \u003Ccode>min-height\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"why-is-margin-auto-not-centering-my-image\">\u003Cstrong>Why is \u003C\u002Fstrong>\u003Ccode>margin: auto\u003C\u002Fcode>\u003Cstrong> not centering my image?\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cp>Almost always one of two reasons: the image is still \u003Ccode>display: inline\u003C\u002Fcode> (its default), or it has no constrained width and is already filling all available horizontal space. Fixing either one usually resolves it.\u003C\u002Fp>\u003Ch3 id=\"should-i-use-flexbox-or-grid-to-center-an-image\">\u003Cstrong>Should I use Flexbox or Grid to center an image?\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cp>Either works equally well for centering a single image. Flexbox tends to fit naturally when the parent already manages a one-dimensional layout, like a card or nav bar; Grid is a better fit once the surrounding layout involves real rows and columns.\u003C\u002Fp>\u003Ch2 id=\"the-short-version\">The Short Version\u003C\u002Fh2>\u003Cp>Centering an image in CSS comes down to remembering one fact: an \u003Ccode><img>\u003C\u002Fcode> is inline by default, unlike a \u003Ccode><div>\u003C\u002Fcode>, which changes which techniques apply out of the box. \u003Ccode>display: block\u003C\u002Fcode> plus \u003Ccode>margin-inline: auto\u003C\u002Fcode> handles the simple standalone case. \u003Ccode>text-align: center\u003C\u002Fcode> on the parent works without touching the image's display value at all. Flexbox and Grid take over once the parent already controls layout or when both axes need centering, and absolute positioning with \u003Ccode>transform\u003C\u002Fcode> is reserved for overlays and layered content that needs to break out of normal flow. Whichever method fits, pair it with \u003Ccode>max-width: 100%\u003C\u002Fcode> and \u003Ccode>height: auto\u003C\u002Fcode> so it holds up on smaller screens too.\u003C\u002Fp>\u003Cp>For the same set of problems applied to \u003Ccode><div>\u003C\u002Fcode> elements and other blocks, see \u003Ca href=\"https:\u002F\u002Fwpfsharp.com\u002Fblog\u002Fhow-to-center-a-div-in-css\">How to Center a Div in CSS\u003C\u002Fa>. For a deeper comparison of when Flexbox and Grid each make more sense, see \u003Ca href=\"https:\u002F\u002Fwww.geeksforgeeks.org\u002Fcss\u002Fcomparison-between-css-grid-css-flexbox\u002F\">CSS Flexbox vs. Grid: When to Use Each\u003C\u002Fa>.\u003C\u002Fp>",[131],{"id":23,"title":132,"slug":133,"excerpt":134,"author":135,"categories":139,"featured_image":141,"reading_time_minutes":143,"meta_title":144,"meta_description":134,"og_image":5,"meta_robots":145,"schema_type":57,"faq_json":5,"video_url":5,"toc_json":146,"published_at":193,"updated_at":194},"How to Center a Div in CSS","how-to-center-a-div-in-css","A practical guide to how to center a div in CSS across real scenarios, from full-page layouts to modals, plus fixes for when it won't work.",{"slug":44,"display_name":45,"job_title":5,"short_bio":5,"expertise_tags":136,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":137,"posts":138},[],[],[],[140],{"name":9,"slug":10},{"url":142,"alt_text":5,"width":53,"height":54},"https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fblog\u002Ffeatured\u002Fhow-to-center-a-div-in-css-v1.webp",8,"CSS Tutorials & Guides for Beginners | WPFSharp",[],[147,151,155,159,163,167,171,175,179,183,187,191],{"id":148,"text":149,"level":12,"children":150},"why-center-a-div-actually-means-four-different-things","Why \"Center a Div\" Actually Means Four Different Things",[],{"id":152,"text":153,"level":12,"children":154},"how-to-center-a-div-in-css-on-a-full-page-or-hero-section","How to Center a Div in CSS on a Full Page or Hero Section",[],{"id":156,"text":157,"level":12,"children":158},"keeping-an-element-centered-inside-an-existing-layout","Keeping an Element Centered Inside an Existing Layout",[],{"id":160,"text":161,"level":12,"children":162},"centering-with-css-grid-instead-of-flexbox","Centering With CSS Grid Instead of Flexbox",[],{"id":164,"text":165,"level":12,"children":166},"centering-a-modal-tooltip-or-overlay","Centering a Modal, Tooltip, or Overlay",[],{"id":168,"text":169,"level":12,"children":170},"the-text-align-trap-beginners-fall-into","The text-align Trap Beginners Fall Into",[],{"id":172,"text":173,"level":12,"children":174},"making-centered-layouts-actually-responsive","Making Centered Layouts Actually Responsive",[],{"id":176,"text":177,"level":12,"children":178},"troubleshooting-why-your-div-wont-center","Troubleshooting: Why Your Div Won't Center",[],{"id":180,"text":181,"level":12,"children":182},"quick-reference-which-method-fits-your-situation","Quick Reference: Which Method Fits Your Situation",[],{"id":184,"text":185,"level":12,"children":186},"mistakes-worth-avoiding","Mistakes Worth Avoiding",[],{"id":188,"text":189,"level":12,"children":190},"faq-about-centering-a-div-in-css","FAQ About Centering a Div in CSS",[],{"id":125,"text":126,"level":12,"children":192},[],"2026-09-07T16:53:48+00:00","2026-09-08T20:23:11+00:00",{"data":196,"links":838,"meta":840},[197,241,313,454,519,740,804],{"id":39,"title":40,"slug":41,"excerpt":42,"author":198,"categories":202,"featured_image":204,"reading_time_minutes":55,"meta_title":5,"meta_description":42,"og_image":5,"meta_robots":205,"schema_type":57,"faq_json":5,"video_url":5,"toc_json":206,"published_at":128,"updated_at":128},{"slug":44,"display_name":45,"job_title":5,"short_bio":5,"expertise_tags":199,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":200,"posts":201},[],[],[],[203],{"name":9,"slug":10},{"url":52,"alt_text":5,"width":53,"height":54},[],[207,209,211,213,215,217,219,221,223,225,227,239],{"id":60,"text":61,"level":12,"children":208},[],{"id":64,"text":65,"level":12,"children":210},[],{"id":68,"text":69,"level":12,"children":212},[],{"id":72,"text":73,"level":12,"children":214},[],{"id":76,"text":77,"level":12,"children":216},[],{"id":80,"text":81,"level":12,"children":218},[],{"id":84,"text":85,"level":12,"children":220},[],{"id":88,"text":89,"level":12,"children":222},[],{"id":92,"text":93,"level":12,"children":224},[],{"id":96,"text":97,"level":12,"children":226},[],{"id":100,"text":101,"level":12,"children":228},[229,231,233,235,237],{"id":104,"text":105,"level":106,"children":230},[],{"id":109,"text":110,"level":106,"children":232},[],{"id":113,"text":114,"level":106,"children":234},[],{"id":117,"text":118,"level":106,"children":236},[],{"id":121,"text":122,"level":106,"children":238},[],{"id":125,"text":126,"level":12,"children":240},[],{"id":242,"title":243,"slug":244,"excerpt":245,"author":246,"categories":250,"featured_image":252,"reading_time_minutes":254,"meta_title":5,"meta_description":255,"og_image":5,"meta_robots":256,"schema_type":57,"faq_json":5,"video_url":5,"toc_json":257,"published_at":311,"updated_at":312},6,"How to Make an Image Link in HTML","how-to-make-an-image-a-link-in-html","Learn how to make an image link in HTML with the right \u003Ca> and  structure, plus new-tab, accessibility, and troubleshooting fixes.\u003C\u002Fa>",{"slug":44,"display_name":45,"job_title":5,"short_bio":5,"expertise_tags":247,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":248,"posts":249},[],[],[],[251],{"name":15,"slug":16},{"url":253,"alt_text":5,"width":53,"height":54},"https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fblog\u002Ffeatured\u002Fhow-to-make-an-image-a-link-in-html_1.webp",10,"Learn how to make an image link in HTML with the right \u003Ca> and \u003Cimg> structure, plus new-tab, accessibility, and troubleshooting fixes.",[],[258,261,265,269,273,277,281,285,309],{"id":244,"text":259,"level":12,"children":260},"How to Make an Image a Link in HTML",[],{"id":262,"text":263,"level":12,"children":264},"link-an-image-to-a-page-website-or-image-file","Link an Image to a Page, Website, or Image File",[],{"id":266,"text":267,"level":12,"children":268},"make-an-image-open-in-a-new-tab","Make an Image Open in a New Tab",[],{"id":270,"text":271,"level":12,"children":272},"make-image-links-accessible","Make Image Links Accessible",[],{"id":274,"text":275,"level":12,"children":276},"common-image-link-examples","Common Image Link Examples",[],{"id":278,"text":279,"level":12,"children":280},"common-mistakes-with-image-links","Common Mistakes With Image Links",[],{"id":282,"text":283,"level":12,"children":284},"fix-an-image-link-that-is-not-working","Fix an Image Link That Is Not Working",[],{"id":286,"text":287,"level":12,"children":288},"faq-about-making-images-links-in-html","FAQ About Making Images Links in HTML",[289,293,297,301,305],{"id":290,"text":291,"level":106,"children":292},"what-is-the-html-code-to-make-an-image-a-link","What is the HTML code to make an image a link?",[],{"id":294,"text":295,"level":106,"children":296},"can-i-make-an-image-link-to-another-website","Can I make an image link to another website?",[],{"id":298,"text":299,"level":106,"children":300},"how-do-i-make-an-image-open-in-a-new-tab","How do I make an image open in a new tab?",[],{"id":302,"text":303,"level":106,"children":304},"can-i-link-an-image-to-another-section-of-the-same-page","Can I link an image to another section of the same page?",[],{"id":306,"text":307,"level":106,"children":308},"why-is-my-html-image-not-clickable","Why is my HTML image not clickable?",[],{"id":125,"text":126,"level":12,"children":310},[],"2026-09-11T16:16:27+00:00","2026-09-11T16:22:24+00:00",{"id":314,"title":315,"slug":316,"excerpt":317,"author":318,"categories":322,"featured_image":324,"reading_time_minutes":254,"meta_title":5,"meta_description":317,"og_image":5,"meta_robots":327,"schema_type":57,"faq_json":5,"video_url":5,"toc_json":328,"published_at":453,"updated_at":453},5,"How to Convert String to Int Java: parseInt(), valueOf() & More","how-to-convert-string-to-int-java-parseint-valueof-more","Learn how to convert string to int Java the right way with parseInt(), valueOf(), radix conversion, and safe NumberFormatException handling.",{"slug":44,"display_name":45,"job_title":5,"short_bio":5,"expertise_tags":319,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":320,"posts":321},[],[],[],[323],{"name":31,"slug":32},{"url":325,"alt_text":326,"width":5,"height":5},"\u002Fstorage\u002Fmedia\u002F01M23RNHPZVQHMX2DYD3YKQJF1.webp","String to int conversion in Java",[],[329,333,345,357,369,381,401,405,409,425,429],{"id":330,"text":331,"level":12,"children":332},"the-quickest-way-to-convert-string-to-int-java-values","The Quickest Way to Convert String to Int Java Values",[],{"id":334,"text":335,"level":12,"children":336},"convert-string-to-int-using-integerparseint","Convert String to Int Using Integer.parseInt()",[337,341],{"id":338,"text":339,"level":106,"children":340},"basic-parseint-syntax","Basic parseInt() Syntax",[],{"id":342,"text":343,"level":106,"children":344},"converting-user-input-to-an-int","Converting User Input to an Int",[],{"id":346,"text":347,"level":12,"children":348},"convert-string-to-integer-using-integervalueof","Convert String to Integer Using Integer.valueOf()",[349,353],{"id":350,"text":351,"level":106,"children":352},"how-integervalueof-works","How Integer.valueOf() Works",[],{"id":354,"text":355,"level":106,"children":356},"parseint-vs-valueof","parseInt() vs valueOf()",[],{"id":358,"text":359,"level":12,"children":360},"convert-a-string-using-a-different-number-base","Convert a String Using a Different Number Base",[361,365],{"id":362,"text":363,"level":106,"children":364},"convert-binary-octal-or-hexadecimal-strings-with-a-radix","Convert Binary, Octal, or Hexadecimal Strings with a Radix",[],{"id":366,"text":367,"level":106,"children":368},"when-to-use-integerdecode","When to Use Integer.decode()",[],{"id":370,"text":371,"level":12,"children":372},"handle-invalid-strings-with-numberformatexception","Handle Invalid Strings with NumberFormatException",[373,377],{"id":374,"text":375,"level":106,"children":376},"what-happens-when-a-string-is-not-a-valid-integer","What Happens When a String Is Not a Valid Integer",[],{"id":378,"text":379,"level":106,"children":380},"safely-convert-user-or-external-input","Safely Convert User or External Input",[],{"id":382,"text":383,"level":12,"children":384},"common-string-to-int-problems-in-java","Common String-to-Int Problems in Java",[385,389,393,397],{"id":386,"text":387,"level":106,"children":388},"leading-and-trailing-whitespace","Leading and Trailing Whitespace",[],{"id":390,"text":391,"level":106,"children":392},"null-strings","Null Strings",[],{"id":394,"text":395,"level":106,"children":396},"decimal-and-formatted-numbers","Decimal and Formatted Numbers",[],{"id":398,"text":399,"level":106,"children":400},"values-outside-the-int-range","Values Outside the int Range",[],{"id":402,"text":403,"level":12,"children":404},"which-string-to-int-java-method-should-you-use","Which String to Int Java Method Should You Use?",[],{"id":406,"text":407,"level":12,"children":408},"common-mistakes-to-avoid-when-converting-string-to-int","Common Mistakes to Avoid When Converting String to Int",[],{"id":410,"text":411,"level":12,"children":412},"practical-examples-of-string-to-int-conversion","Practical Examples of String-to-Int Conversion",[413,417,421],{"id":414,"text":415,"level":106,"children":416},"convert-a-string-before-performing-arithmetic","Convert a String Before Performing Arithmetic",[],{"id":418,"text":419,"level":106,"children":420},"convert-multiple-string-values","Convert Multiple String Values",[],{"id":422,"text":423,"level":106,"children":424},"convert-a-string-safely-in-a-real-world-input-flow","Convert a String Safely in a Real-World Input Flow",[],{"id":426,"text":427,"level":12,"children":428},"wrapping-up","Wrapping Up",[],{"id":430,"text":431,"level":12,"children":432},"frequently-asked-questions-about-string-to-int-in-java","Frequently Asked Questions About String to Int in Java",[433,437,441,445,449],{"id":434,"text":435,"level":106,"children":436},"what-is-the-easiest-way-to-convert-a-string-to-int-in-java","What is the easiest way to convert a String to int in Java?",[],{"id":438,"text":439,"level":106,"children":440},"what-is-the-difference-between-parseint-and-valueof-in-java","What is the difference between parseInt() and valueOf() in Java?",[],{"id":442,"text":443,"level":106,"children":444},"how-do-i-convert-a-string-to-int-without-getting-numberformatexception","How do I convert a String to int without getting NumberFormatException?",[],{"id":446,"text":447,"level":106,"children":448},"can-i-convert-a-decimal-string-directly-to-an-int-in-java","Can I convert a decimal String directly to an int in Java?",[],{"id":450,"text":451,"level":106,"children":452},"how-do-i-convert-a-binary-or-hexadecimal-string-to-an-int-in-java","How do I convert a binary or hexadecimal String to an int in Java?",[],"2026-09-09T19:09:06+00:00",{"id":455,"title":456,"slug":457,"excerpt":458,"author":459,"categories":463,"featured_image":465,"reading_time_minutes":254,"meta_title":456,"meta_description":458,"og_image":5,"meta_robots":467,"schema_type":57,"faq_json":5,"video_url":5,"toc_json":468,"published_at":517,"updated_at":518},4,"How to Check if a String Contains a Word in Python","string-contains-python","The direct way to check if a string contains a word in Python, plus whole-word matching, case-insensitive search, and finding word positions.",{"slug":44,"display_name":45,"job_title":5,"short_bio":5,"expertise_tags":460,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":461,"posts":462},[],[],[],[464],{"name":26,"slug":27},{"url":466,"alt_text":5,"width":53,"height":54},"https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fblog\u002Ffeatured\u002Fstring-contains-python_1.webp",[],[469,473,477,481,485,489,493,497,501,505,509,513],{"id":470,"text":471,"level":106,"children":472},"the-direct-answer-use-the-in-operator","The Direct Answer: Use the in Operator",[],{"id":474,"text":475,"level":106,"children":476},"in-finds-substrings-not-whole-words","in Finds Substrings, Not Whole Words",[],{"id":478,"text":479,"level":106,"children":480},"how-to-match-a-whole-word-instead-of-any-substring","How to Match a Whole Word Instead of Any Substring",[],{"id":482,"text":483,"level":106,"children":484},"case-insensitive-substring-and-word-checks","Case-Insensitive Substring and Word Checks",[],{"id":486,"text":487,"level":106,"children":488},"finding-where-a-match-occurs-find-and-index","Finding Where a Match Occurs: find() and index()",[],{"id":490,"text":491,"level":106,"children":492},"counting-matches-with-count","Counting Matches with count()",[],{"id":494,"text":495,"level":106,"children":496},"checking-several-words-at-once","Checking Several Words at Once",[],{"id":498,"text":499,"level":106,"children":500},"using-regular-expressions-for-pattern-based-text-search","Using Regular Expressions for Pattern-Based Text Search",[],{"id":502,"text":503,"level":106,"children":504},"common-pitfalls-at-a-glance","Common Pitfalls at a Glance",[],{"id":506,"text":507,"level":106,"children":508},"choosing-the-right-method","Choosing the Right Method",[],{"id":510,"text":511,"level":106,"children":512},"frequently-asked-questions","Frequently Asked Questions",[],{"id":514,"text":515,"level":106,"children":516},"conclusion","Conclusion",[],"2026-09-09T16:50:55+00:00","2026-09-09T16:53:02+00:00",{"id":106,"title":520,"slug":521,"excerpt":522,"author":523,"categories":527,"featured_image":529,"reading_time_minutes":532,"meta_title":533,"meta_description":522,"og_image":5,"meta_robots":534,"schema_type":57,"faq_json":5,"video_url":5,"toc_json":535,"published_at":739,"updated_at":739},"What Is WPF in C#? A Complete Guide to Windows Presentation Foundation","what-is-wpf-in-csharp","What is WPF in C#? A clear guide to Windows Presentation Foundation, how it works with C# and XAML, and whether it's worth learning in 2026.",{"slug":44,"display_name":45,"job_title":5,"short_bio":5,"expertise_tags":524,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":525,"posts":526},[],[],[],[528],{"name":20,"slug":21},{"url":530,"alt_text":531,"width":5,"height":5},"\u002Fstorage\u002Fmedia\u002F01M20ZGFAW00NYSYC5YMV0SG53.webp","WPF in C# complete guide infographic featuring Visual Studio XAML designer, data binding architecture, MVVM pattern icons, and C# code logic on a laptop screen.",13,"What Is WPF in C#?",[],[536,547,559,575,583,615,631,655,671,679,695,715,727,731,735],{"id":537,"text":533,"level":12,"children":538},"what-is-wpf-in-c",[539,543],{"id":540,"text":541,"level":106,"children":542},"is-wpf-part-of-c-or-net","Is WPF Part of C# or .NET?",[],{"id":544,"text":545,"level":106,"children":546},"what-does-wpf-stand-for","What Does WPF Stand For?",[],{"id":548,"text":549,"level":12,"children":550},"what-is-wpf-used-for","What Is WPF Used For?",[551,555],{"id":552,"text":553,"level":106,"children":554},"what-can-you-build-with-wpf","What Can You Build With WPF?",[],{"id":556,"text":557,"level":106,"children":558},"what-cant-wpf-be-used-for","What Can't WPF Be Used For?",[],{"id":560,"text":561,"level":12,"children":562},"how-does-wpf-work-with-c","How Does WPF Work With C#?",[563,567,571],{"id":564,"text":565,"level":106,"children":566},"what-is-xaml-in-wpf","What Is XAML in WPF?",[],{"id":568,"text":569,"level":106,"children":570},"what-is-code-behind-in-wpf","What Is Code-Behind in WPF?",[],{"id":572,"text":573,"level":106,"children":574},"simple-wpf-xaml-and-c-example","Simple WPF XAML and C# Example",[],{"id":576,"text":577,"level":12,"children":578},"how-is-a-wpf-application-structured","How Is a WPF Application Structured?",[579],{"id":580,"text":581,"level":106,"children":582},"how-xaml-c-and-wpf-work-together","How XAML, C#, and WPF Work Together",[],{"id":584,"text":585,"level":12,"children":586},"key-features-of-wpf","Key Features of WPF",[587,591,595,599,603,607,611],{"id":588,"text":589,"level":106,"children":590},"xaml-based-ui","XAML-Based UI",[],{"id":592,"text":593,"level":106,"children":594},"data-binding","Data Binding",[],{"id":596,"text":597,"level":106,"children":598},"dependency-properties","Dependency Properties",[],{"id":600,"text":601,"level":106,"children":602},"routed-events","Routed Events",[],{"id":604,"text":605,"level":106,"children":606},"styles-and-control-templates","Styles and Control Templates",[],{"id":608,"text":609,"level":106,"children":610},"wpf-layout-system","WPF Layout System",[],{"id":612,"text":613,"level":106,"children":614},"graphics-and-animation","Graphics and Animation",[],{"id":616,"text":617,"level":12,"children":618},"what-is-data-binding-in-wpf","What Is Data Binding in WPF?",[619,623,627],{"id":620,"text":621,"level":106,"children":622},"how-wpf-data-binding-works","How WPF Data Binding Works",[],{"id":624,"text":625,"level":106,"children":626},"simple-data-binding-example","Simple Data Binding Example",[],{"id":628,"text":629,"level":106,"children":630},"why-data-binding-matters-in-wpf","Why Data Binding Matters in WPF",[],{"id":632,"text":633,"level":12,"children":634},"what-is-mvvm-in-wpf","What Is MVVM in WPF?",[635,639,643,647,651],{"id":636,"text":637,"level":106,"children":638},"model","Model",[],{"id":640,"text":641,"level":106,"children":642},"view","View",[],{"id":644,"text":645,"level":106,"children":646},"viewmodel","ViewModel",[],{"id":648,"text":649,"level":106,"children":650},"why-is-mvvm-commonly-used-with-wpf","Why Is MVVM Commonly Used With WPF?",[],{"id":652,"text":653,"level":106,"children":654},"is-mvvm-required-for-wpf","Is MVVM Required for WPF?",[],{"id":656,"text":657,"level":12,"children":658},"how-to-create-a-wpf-application-in-c","How to Create a WPF Application in C#",[659,663,667],{"id":660,"text":661,"level":106,"children":662},"what-you-need","What You Need",[],{"id":664,"text":665,"level":106,"children":666},"create-a-wpf-project","Create a WPF Project",[],{"id":668,"text":669,"level":106,"children":670},"build-and-run-your-first-wpf-app","Build and Run Your First WPF App",[],{"id":672,"text":673,"level":12,"children":674},"wpf-vs-windows-forms","WPF vs Windows Forms",[675],{"id":676,"text":677,"level":106,"children":678},"which-is-better-wpf-or-winforms","Which Is Better: WPF or WinForms?",[],{"id":680,"text":681,"level":12,"children":682},"wpf-vs-winui-3","WPF vs WinUI 3",[683,687,691],{"id":684,"text":685,"level":106,"children":686},"what-is-winui-3","What Is WinUI 3?",[],{"id":688,"text":689,"level":106,"children":690},"wpf-vs-winui-3-main-differences","WPF vs WinUI 3: Main Differences",[],{"id":692,"text":693,"level":106,"children":694},"should-you-learn-wpf-or-winui","Should You Learn WPF or WinUI?",[],{"id":696,"text":697,"level":12,"children":698},"is-wpf-still-relevant-in-2026","Is WPF Still Relevant in 2026?",[699,703,707,711],{"id":700,"text":701,"level":106,"children":702},"is-wpf-still-supported","Is WPF Still Supported?",[],{"id":704,"text":705,"level":106,"children":706},"does-wpf-work-with-modern-net","Does WPF Work With Modern .NET?",[],{"id":708,"text":709,"level":106,"children":710},"is-wpf-still-used-for-business-applications","Is WPF Still Used for Business Applications?",[],{"id":712,"text":713,"level":106,"children":714},"should-you-learn-wpf-today","Should You Learn WPF Today?",[],{"id":716,"text":717,"level":12,"children":718},"advantages-and-disadvantages-of-wpf","Advantages and Disadvantages of WPF",[719,723],{"id":720,"text":721,"level":106,"children":722},"advantages-of-wpf","Advantages of WPF",[],{"id":724,"text":725,"level":106,"children":726},"disadvantages-of-wpf","Disadvantages of WPF",[],{"id":728,"text":729,"level":12,"children":730},"common-wpf-terms-beginners-should-know","Common WPF Terms Beginners Should Know",[],{"id":732,"text":733,"level":12,"children":734},"frequently-asked-questions-about-wpf-in-c","Frequently Asked Questions About WPF in C#",[],{"id":736,"text":737,"level":12,"children":738},"final-answer-what-is-wpf-in-c","Final Answer: What Is WPF in C#?",[],"2026-09-08T17:04:51+00:00",{"id":12,"title":741,"slug":742,"excerpt":743,"author":744,"categories":748,"featured_image":750,"reading_time_minutes":242,"meta_title":753,"meta_description":743,"og_image":5,"meta_robots":754,"schema_type":57,"faq_json":5,"video_url":5,"toc_json":755,"published_at":802,"updated_at":803},"How to Add an Image in HTML: The Complete img Tag Guide","how-to-add-an-image-in-html","Learn how to add image in HTML with the img tag, alt text, relative paths, srcset, and the picture element — plus common mistakes to avoid.",{"slug":44,"display_name":45,"job_title":5,"short_bio":5,"expertise_tags":745,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":746,"posts":747},[],[],[],[749],{"name":15,"slug":16},{"url":751,"alt_text":752,"width":5,"height":5},"\u002Fstorage\u002Fmedia\u002F01M20TNJ8K254FH80P5N6V87PR.webp","How to add an image in HTML using the img tag, responsive images, and alt text","How to Add Image in HTML",[],[756,760,764,768,772,776,780,784,788,792,796,800],{"id":757,"text":758,"level":12,"children":759},"the-basic-syntax-for-how-to-add-image-in-html","The Basic Syntax for How to Add Image in HTML",[],{"id":761,"text":762,"level":12,"children":763},"understanding-the-img-tags-core-attributes","Understanding the img Tag's Core Attributes",[],{"id":765,"text":766,"level":12,"children":767},"relative-root-relative-and-absolute-urls-for-images","Relative, Root-Relative, and Absolute URLs for Images",[],{"id":769,"text":770,"level":12,"children":771},"making-images-responsive-with-srcset-and-sizes","Making Images Responsive with srcset and sizes",[],{"id":773,"text":774,"level":12,"children":775},"using-the-picture-element-for-format-fallbacks","Using the picture Element for Format Fallbacks",[],{"id":777,"text":778,"level":12,"children":779},"wrapping-images-with-figure-and-figcaption","Wrapping Images with figure and figcaption",[],{"id":781,"text":782,"level":12,"children":783},"making-an-image-clickable","Making an Image Clickable",[],{"id":785,"text":786,"level":12,"children":787},"lazy-loading-images-for-performance","Lazy Loading Images for Performance",[],{"id":789,"text":790,"level":12,"children":791},"common-mistakes-when-adding-images-in-html","Common Mistakes When Adding Images in HTML",[],{"id":793,"text":794,"level":12,"children":795},"quick-reference-which-approach-fits-your-situation","Quick Reference: Which Approach Fits Your Situation",[],{"id":797,"text":798,"level":12,"children":799},"faq-about-adding-images-in-html","FAQ About Adding Images in HTML",[],{"id":125,"text":126,"level":12,"children":801},[],"2026-09-08T15:41:06+00:00","2026-09-08T20:23:09+00:00",{"id":23,"title":132,"slug":133,"excerpt":134,"author":805,"categories":809,"featured_image":811,"reading_time_minutes":143,"meta_title":144,"meta_description":134,"og_image":5,"meta_robots":812,"schema_type":57,"faq_json":5,"video_url":5,"toc_json":813,"published_at":193,"updated_at":194},{"slug":44,"display_name":45,"job_title":5,"short_bio":5,"expertise_tags":806,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":807,"posts":808},[],[],[],[810],{"name":9,"slug":10},{"url":142,"alt_text":5,"width":53,"height":54},[],[814,816,818,820,822,824,826,828,830,832,834,836],{"id":148,"text":149,"level":12,"children":815},[],{"id":152,"text":153,"level":12,"children":817},[],{"id":156,"text":157,"level":12,"children":819},[],{"id":160,"text":161,"level":12,"children":821},[],{"id":164,"text":165,"level":12,"children":823},[],{"id":168,"text":169,"level":12,"children":825},[],{"id":172,"text":173,"level":12,"children":827},[],{"id":176,"text":177,"level":12,"children":829},[],{"id":180,"text":181,"level":12,"children":831},[],{"id":184,"text":185,"level":12,"children":833},[],{"id":188,"text":189,"level":12,"children":835},[],{"id":125,"text":126,"level":12,"children":837},[],{"first":839,"last":839,"prev":5,"next":5},"http:\u002F\u002Fapp\u002Fapi\u002Fblog?page=1",{"current_page":23,"from":23,"last_page":23,"links":841,"path":850,"per_page":851,"to":39,"total":39},[842,845,848],{"url":5,"label":843,"page":5,"active":844},"« Previous",false,{"url":839,"label":846,"page":23,"active":847},"1",true,{"url":5,"label":849,"page":5,"active":844},"Next »","http:\u002F\u002Fapp\u002Fapi\u002Fblog",9]