{"id":2114,"date":"2017-05-18T17:56:34","date_gmt":"2017-05-18T17:56:34","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=2114"},"modified":"2018-10-10T17:15:56","modified_gmt":"2018-10-10T17:15:56","slug":"vertically-centering-items-in-a-div2017-version","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=2114","title":{"rendered":"Vertically Centering items in a div&ndash;2017 version!"},"content":{"rendered":"<p>I posted about this kind of issue <a href=\"http:\/\/salientsoft.co.uk\/?p=1084\">back in 2010 here<\/a>.<\/p>\n<p>Nowadays for my own project work I am happy to assume recent browsers, in particularly IE11 at least (noting that even this has been out a while now \u2013 it was released 4 years ago now so a reasonable start point).<\/p>\n<p>This means that I am happy to use css Flex which makes this insanely simple compared to the old days. You just need <em>display:flex;align-items:center<\/em> in the container div and its content items will centre vertically.<\/p>\n<p>I\u2019ve just used this on a PrimeNG data list component to centre left thumbnails correctly in a list item with no issues.<\/p>\n<p>Quite why we have had to suffer for so many years with arcane tricks (or risk ridicule by making it simple using tables for layout) is beyond me, but there we are.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I posted about this kind of issue back in 2010 here. Nowadays for my own project work I am happy to assume recent browsers, in particularly IE11 at least (noting that even this has been out a while now \u2013 it was released 4 years ago now so a reasonable start point). This means that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[198,79,209,77],"tags":[40,16],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2114"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2114"}],"version-history":[{"count":1,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2114\/revisions"}],"predecessor-version":[{"id":2115,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2114\/revisions\/2115"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}