{"id":1931,"date":"2016-06-02T12:00:39","date_gmt":"2016-06-02T12:00:39","guid":{"rendered":"http:\/\/cssreset.com\/?p=1931"},"modified":"2016-06-02T12:01:39","modified_gmt":"2016-06-02T12:01:39","slug":"how-to-center-any-html-element","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-center-any-html-element\/","title":{"rendered":"How to Center Any HTML Element"},"content":{"rendered":"

We’ve all had that pesky HTML element that refuses to center no matter how many different CSS styles we apply. We always get it eventually, but sometimes it’s not before a lot of time has been wasted trying to remember different CSS rules about centering elements. If you currently happen to find yourself in a similar situation, here’s an overview of the basic CSS centering rules.<\/p>\n

When centering text tags (paragraphs, headers, etc), all you have to do is apply one line of CSS to make the elements centered:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. p,<\/span> h3{<\/span><\/div><\/li>\n
  2. text-align<\/span>:<\/span> center<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    To center block elements (divs), you need to define the width of the element and set the left and right margins of the element to auto. The top and bottom margins can be set to whatever you like. Doing this using short code would look something like this:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. div{<\/span><\/div><\/li>\n
    2. width<\/span>:<\/span> 250px<\/span>;<\/span><\/div><\/li>\n
    3. margin<\/span>:<\/span> 0<\/span> auto<\/span>;<\/span><\/div><\/li>\n
    4. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      Where it usually gets tricky is with inline elements, like images. This is because in order for margin: 0 auto<\/strong> to work on them, they need to be displayed as a block. Here’s how that code would look:<\/p>\n

      \r\n\r\n\t\t
      \r\n\r\n\t\t
      \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
      css<\/div>\r\n\r\n\t\t\r\n\t\t
      \r\n\r\n\t<\/div>\r\n\t\r\n\t
      \r\n\t\t
      1. img{<\/span><\/div><\/li>\n
      2. display<\/span>:<\/span> block<\/span>;<\/span><\/div><\/li>\n
      3. width<\/span>:<\/span> 250px<\/span>;<\/span><\/div><\/li>\n
      4. margin<\/span>:<\/span> 0<\/span> auto<\/span>;<\/span><\/div><\/li>\n
      5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

        And if none of that helps you, you can also refer to this useful\u00a0web app<\/a> that generates CSS code to center any HTML element.<\/p>\n

        Share and Enjoy !<\/h3>
        0<\/span><\/span>Shares<\/small><\/div>
        <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

        We’ve all had that pesky HTML element that refuses to center no matter how many different CSS styles we apply. We always get it eventually, but sometimes it’s not before a lot of time has been wasted trying to remember […]<\/p>\n

        Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[61,6,36,42],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1931"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1931"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1931\/revisions"}],"predecessor-version":[{"id":1933,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1931\/revisions\/1933"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}