{"id":24,"date":"2008-10-16T03:39:19","date_gmt":"2008-10-16T03:39:19","guid":{"rendered":"\/\/technology.beauchamp.me\/?p=24"},"modified":"2008-10-16T03:39:19","modified_gmt":"2008-10-16T03:39:19","slug":"how-to-center-a-div-block-using-styles","status":"publish","type":"post","link":"https:\/\/www.beauchamp.me\/techno\/blog\/2008\/10\/16\/how-to-center-a-div-block-using-styles\/","title":{"rendered":"How to center a div block using styles"},"content":{"rendered":"<p>Today, I came across the problem of having to center a div block on a web page without having all its content being centered. I thought of using  text-align: center; but then all the div inner elements would have inherited that style, and that is not what I wanted. I wanter the text inside the div block to be justified to the left.<\/p>\n<p>I did some researching on the web, and I found the following solution: Specify the width of the div block and set its left and right margins to <em>auto<\/em>. For example:<\/p>\n<blockquote><p>&lt;div style=&#8221;width: 500px; margin-left: auto; margin-right: auto;&#8221;&gt; &#8230; &lt;\/div&gt;<\/p><\/blockquote>\n<p>Of course, all this should be done with a style-sheet, but for the sake of simplicity in the example, I specified the style inline.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today, I came across the problem of having to center a div block on a web page without having all its content being centered. I thought of using text-align: center; but then all the div inner elements would have inherited that style, and that is not what I wanted. I wanter the text inside the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-24","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/www.beauchamp.me\/techno\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.beauchamp.me\/techno\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.beauchamp.me\/techno\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.beauchamp.me\/techno\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.beauchamp.me\/techno\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":2,"href":"https:\/\/www.beauchamp.me\/techno\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/www.beauchamp.me\/techno\/wp-json\/wp\/v2\/posts\/24\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/www.beauchamp.me\/techno\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.beauchamp.me\/techno\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.beauchamp.me\/techno\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}