{"id":99,"date":"2017-03-11T04:56:28","date_gmt":"2017-03-11T04:56:28","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=99"},"modified":"2017-10-15T13:45:31","modified_gmt":"2017-10-15T08:15:31","slug":"solved-5-answers-center-image-using-text-align-center","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/solved-5-answers-center-image-using-text-align-center\/","title":{"rendered":"[ Solved \u2013 5 Answers] Center image using text-align center?"},"content":{"rendered":"<p><span class=\"label label-warning\">PROBLEM :<\/span><\/p>\n<p>The problem is the good way to center an image using css ?<\/p>\n<p>Is the property text-align: center;<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dimg%20%7B%0A%20text-align%3A%20center%3B%0A%7D\u201d message=\u201dCSS Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><!--?php include(\"https:\/\/www.wikitechy.com\/html\/cad1.php\"); ?--><span class=\"label label-info\">SOLUTION 1 :<\/span><\/p>\n<p>That will not work as the text-align property applies to block containers, not inline elements, and img is an inline element.<\/p>\n<p>Use this instead:<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dimg.%20Center%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20margin%3A%200%20auto%3B%0A%7D\u201d message=\u201dCSS Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><span class=\"label label-info\">SOLUTION 2 :<\/span><br \/>\nThis solution doesn\u2019t always work. if it doesn\u2019t, try.<\/p>\n<p>we tried the following solution.<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201dimg%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20margin%3A%200%20auto%3B%0A%7D\u201d message=\u201dCSS Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><span class=\"label label-info\">SOLUTION 3 :<\/span><br \/>\nAnother way of doing would be centering an enclosing paragraph.<br \/>\ntext-align center is a good way to center an image, and did not specify that the property had to be a part of the img tag.<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cp%20style%3D%22text-align%3Acenter%22%3E%3Cimg%20src%3D%22\u2026%22%2F%3E%3C%2Fp%3E\u201d message=\u201dHTML Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><span class=\"label label-info\">SOLUTION 4 :<\/span><br \/>\nYou can do the following solution: text-align:<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ccenter%3E%3Cimg%20src%3D%22\u2026%22%20%2F%3E%3C%2Fcenter%3E\u201d message=\u201dHTML Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><span class=\"label label-info\">SOLUTION 5 :<\/span><br \/>\nHere the solution is simply change parent align.<br \/>\nTry this one on parent properties text-align:center<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[solved &#8211; 5 Answers] CSS &#8211; text-align center &#8211; The problem is the good way to center an image using css ?Is the property text-align: center;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[1401,83432,83429,83434,83426,517,83418,518,83419,83420,83430,519,515,43,521,1399,83424,520,83427,516,1406,514,83433,83421,83422,83431,83428,83423,83425,513],"class_list":["post-99","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-align-center","tag-align-content-center","tag-align-items-center","tag-align-self-center","tag-align-text-center-vertically","tag-bootstrap-center-image","tag-center-an-image-css","tag-center-div-css","tag-center-image-in-div-vertically","tag-center-image-in-div-vertically-and-horizontally","tag-css-align-center","tag-css-center-image-horizontally","tag-css-center-image-in-div","tag-css-center-text-vertically","tag-css-center-vertically","tag-div-align-center","tag-div-style-text-align-center","tag-horizontal-align-css","tag-how-to-align-text","tag-html-center-image-on-page","tag-html-text-align-center","tag-image-center-css","tag-p-align-center","tag-style-text-align-center","tag-table-text-align-center","tag-td-align-center-is-invalid","tag-text-align-center","tag-text-align-center-css","tag-text-align-center-not-working","tag-text-align"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/99","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/99\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=99"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=99"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}