{"id":1058,"date":"2010-06-09T17:06:49","date_gmt":"2010-06-09T17:06:49","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=1058"},"modified":"2012-01-18T11:20:50","modified_gmt":"2012-01-18T11:20:50","slug":"using-inline-block-to-centre-text-and-other-items-e-g-on-a-primefaces-command-button","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=1058","title":{"rendered":"Centre text and other items e.g. on a Primefaces command button"},"content":{"rendered":"

Update<\/span><\/strong><\/p>\n

This post originally used display:inline-block<\/em> and vertical-align:middle<\/em> thinking mistakenly that these were part of the fix for the problem.
\nSee here <\/a>for a more complete understanding of it.
\nThe modified CSS below works fine just by removing the padding and setting the font.<\/p>\n

Taking the Primefaces commandButton as an example, the label is embedded in a span:-<\/p>\n

<button attr1=value attr2=value\u2026>
\n<span>Submit<\/span
\n<\/button><\/p>\n

The button has many attributes which are not relevant to this discussion.
\nHowever, as the span is an inline element, it does not have a top\/bottom margin, width or height and using text-align:center;<\/em> in css has no effect.<\/p>\n

The default Primefaces button has fixed padding for the label, which works fine by default but which is a pain when you change the size of either the button or the text.<\/p>\n

The following rules remove the padding and set the desired font correctly to centre the text for the Primefaces commnadButton:-<\/em><\/p>\n

.ss-textbutton {
\nheight:20px;
\nwidth:52px;
\n}
\n.ss-textbutton > .ui-button-text {
\nfont-size:90%;
\nfont-weight: bold;
\npadding:0px;
\n}<\/p>\n

This CSS is activated when the class ss-textbutton<\/em> is passed to the styleClass<\/em> attribute of the commandButton<\/em> tag.
\nThis example declares a 52 x 20 button. It then targets the <span> within the button using ss-textbutton > ui-button-text<\/em>, as the <span> in the commandButton has the ui-button-text<\/em> class. It does the following to the <span>:-<\/p>\n