Vertical text alignment in Vertical Spre Menu Bar

Posted on 2009-12-28
Last Modified: 2012-05-08

I have a vertical spry menu bar with width 100px and height 50px. The texts in the menu bar are now vertically aligned at the top. How to align them vertically in the middle? I tried to set CSS Styles -> All -> SpryMenuBarVertical.css -> ul.MenuBarVerticalBlock -> Vertical Alignment -> Middle. It does not work.

Any ideas or suggestions is greatly appreicated.
Question by:nnrsc
    LVL 1

    Accepted Solution

    Well the first step is to try multiple browsers, but I'll assume you did that.

    Try inline css, sometimes its hard to see the top level governance for that text. By specifying manually that this text will have allignment in its tag, you almost guarantee everything else will be overridden.

    Also ensure there is sufficient room for the text to move around in the surrounding "box".

    Author Closing Comment

    Thanks for the suggestion. It points me to the right direction.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Join & Write a Comment

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now