Vertical Align PanelBarItem Text

[Landon]

Hi,

Is there any easy way of Vertically Aligning the Text in the PanelBarItem Header? I have tried applying style directly to the Item, and also through the use of a PanelBarHeader class I have set up in CSS, but so far no luck. I currently have a larger Image inside the PanelBar (32x32) and I would like to vertically align my Header Text in the middle of these images.

Any help would be greatly appreciated.

Best Regards,

Landon

[Shinu]

Hello Landon,

You can achieve this by overriding the default CSS class.
CSS:

.rpText
        {
            writing-mode: tb-rl !important;
            filter: flipV flipH !important;
            display:table !important;
            -moz-transform: rotate(-90deg) !important;
        }

Please go through the following link which explains more on Text rotation with CSS.
Text Rotation with CSS

Thanks,
Shinu.

[Landon]

Shinu

I believe you've misunderstood what I am trying to achieve. Although you have also taught me something new, it is unneeded in my current situation.. I am only trying to align the "Image" and "Text" part in the Panel vertically, like you would with the Vertical-align property in CSS. I have tried:

.rpText
        {
            vertical-align: super !important;
        }

but have had no luck. I would normally just use a div to align these two objects, but in the case that both the text/image properties are nested within the PanelBarItem, I am unsure of how to access these.

I have attached an image of how they currently look. I am only trying to align the text with the center of the image.

Thanks again Shinu for the help, and I apologize for not explaining my question as well as I should have.

Best Regards,

Landon


EDIT:

Ended up finding a workaround for my problem. I simply used "line-height" and set it to 300% to achieve the alignment I needed.
Thanks!