Hi Carlton,
Why don't you try adding !important to the text-align property? And if you would need to center align the items as well, you would have to define the CSS class for those as well, using the following script:
.sapUiLbxITxt
{
text-align:center !important ;
}
So now, your modified CSS would look like this:
/* Custom CSS *//*Dropdown main area: default, hover & focus */
.sapUiTfCombo,
.sapUiTfBack.sapUiTfStd { padding:0 12px 0 0; height:25px; margin-top:1px; border: none; border-radius:3px; background:none; text-align: center !important ;
}
.sapUiTfBrd.sapUiTfFoc,
.sapUiTfCombo:hover { padding:0 26px 0 0; height:25px; margin-top:1px; border: solid 1px #2cc588; text-align: center !important ;
}
.sapUiTf { font-family: "Myriad Pro",Arial, Helvetica, sans-serif; font-size:14px; -webkit-appearance:none; text-align: center !important ;
}
.sapUiTfStd { background-color: #ffffff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #666666; text-align: center !important ;
}
.sapUiLbxITxt
{ text-align:center !important ;
}And this is the output I get:
Hope this meets your requirements.
Regards,
Anuraag