Vertical Align PanelBarItem Text

3 posts, 0 answers
  1. Landon
    Landon avatar
    66 posts
    Member since:
    Nov 2010

    Posted 12 Jan 2011 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 Jan 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Landon
    Landon avatar
    66 posts
    Member since:
    Nov 2010

    Posted 13 Jan 2011 Link to this post

    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!

Back to Top