{"id":1084,"date":"2010-09-18T11:08:59","date_gmt":"2010-09-18T11:08:59","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=1084"},"modified":"2012-01-18T11:20:43","modified_gmt":"2012-01-18T11:20:43","slug":"using-displayinline-block-in-css","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=1084","title":{"rendered":"Using display:inline-block and vertical-align in CSS"},"content":{"rendered":"

Update 23\/11\/2010<\/span><\/strong><\/p>\n

Having experimented with this extensively on different browsers, I have found inconsistent results across browsers when trying to vertically centre a group of controls in a bordered div which closely surrounds them. If you need just a few pixels between the controls and the border, vertical centering does not work in a consistent browser independent manner. For larger centring, e.g. for centring a paragraph of text in a large div, the differences may not be noticeable, but at small scale they definitely are. For\u00a0placing a close border around a group of related controls, my preferred method is now to use floats as detailed here<\/strong>. Note that the fact that floats are used does not force the rest of the document to use floats or to have\u00a0non fixed\u00a0sizing\u00a0– the floats\u00a0can be\u00a0invisible to the outside due to a second outer non floated fixed size div. Also, the floated version works better when the contained controls are of variable or unknown size.<\/p>\n

Original post<\/span><\/strong><\/p>\n

I originally used this here<\/strong><\/a> in order to centre the text on a Primefaces button, the usage of\u00a0inline-block<\/em> was incorrect.<\/p>\n

What it does not <\/strong>do is allow you for example to centre a <span> element vertically and\/or horizontally in a parent div!<\/p>\n

What it does<\/strong> do is to allow setting of the alignment of an inline element relative to adjacent inline elements on a line (not<\/strong> relative to the parent container). It will therefore work within a <td> but not within a <div><\/p>\n

There appear to be a lot of fuzzy and partly incorrect articles on the net about this, and it was hard to find clear definitions. even the W3schools site does not greatly help, and does not appear to list for each element whether it is an inline or block element by default, which seems quite an omission.<\/p>\n

In the end I found some helpful posts on it here<\/strong><\/a> and here<\/strong><\/a> which cleared it up for me, and explained why my simple example of a <span> in a <div> would not centre vertically with inline-block<\/em> and vertical-align:middle<\/em>!<\/p>\n

Note<\/strong> regarding the use of vertical-align<\/em>, a typical gotcha on this is if you have a horizontal group of buttons\/combos and attempt to use top\/bottom margins to try to centre them vertically, you may wonder why you do not get the expected behaviour as the margins do not appear to be properly honoured. This is a classic case for using display:inline-block<\/em><\/strong> and\u00a0vertical-align:middle<\/strong><\/em> on all the controls.
\nPrimefaces note:-<\/strong> the Primefaces commandButton<\/em> components are set to\u00a0 display:inline-block<\/em> by Primefaces, using the internal jQuery ui-button<\/em> class.<\/p>\n","protected":false},"excerpt":{"rendered":"

Update 23\/11\/2010 Having experimented with this extensively on different browsers, I have found inconsistent results across browsers when trying to vertically centre a group of controls in a bordered div which closely surrounds them. If you need just a few pixels between the controls and the border, vertical centering does not work in a consistent […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79],"tags":[189,40,78,171,112,16,188],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1084"}],"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=1084"}],"version-history":[{"count":8,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1084\/revisions"}],"predecessor-version":[{"id":1700,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1084\/revisions\/1700"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}