Ticket T429138
Visible to All Users

ASPxMenu - How to align items' text vertically

created 8 years ago

I am trying to  vertical align my text in a aspxmenu that has a height set at 75 px and menu is built from database that all works fine

No matter what I do the text is aligning to the top of the menu: - any suggestions? - I tried the css answer and that did not work

<div style="vertical-align: middle; margin: 0; padding: 0px; padding-left: 20px; padding-right: 20px; background-color: #3498db">
<dx:ASPxMenu ID="menuActionItems" EnableAdaptivity="True" ItemSpacing="20px" AllowSelectItem="True" EncodeHtml="False"
Border-BorderStyle="None" Width="100%" Height="75px" runat="server" BackColor="#3498DB" ForeColor="White">
<ItemStyle Height="75px" VerticalAlign="Middle" HorizontalAlign="Center">
<Paddings Padding="0" />
<HoverStyle BackColor="Green"></HoverStyle>
<SelectedStyle ForeColor="white" Font-Bold="true" BackColor="Transparent" Border-BorderStyle="None">
<Border BorderStyle="None"></Border>
</SelectedStyle>
</ItemStyle>
<Border BorderStyle="None"></Border>
</dx:ASPxMenu>
</div>

Answers approved by DevExpress Support

created 8 years ago (modified 8 years ago)

Hello,

To align an item's text vertically, I suggest you use the approach described in the ASPxMenu - Item text vertical alignment problem ticket and assign a custom CSS class to items by setting the ItemStyle.CssClass property:

ASPx
<ItemStyle CssClass="alignText" Height="75px" >
CSS
.alignText > div { padding-top: 0px !important; padding-bottom: 0px !important; display: table !important; height: 100%; } .alignText > div > span { display: table-cell !important; vertical-align: middle; }

Let us know if this helps.

UPDATED BY Alessandro (DevExpress Support Team):

If you also need to align an image in the menu item, you can add the following CSS rules:

CSS
.alignText > div:before { content: ' '; display: inline-block; vertical-align: middle; height: 100%; } .alignText > div > img { vertical-align: middle; display: inline-block; }

Attached is the updated sample.

Note that you can use the approach from the K18570 - How to inspect CSS rules KB article to examine generated CSS or HTML attributes, and see how they are applied to particular HTML elements. This way, you can inspect CSS rules and override/correct existing rules of required elements to modify their appearance or layout according to your needs.

See Also:
Vertically align an image inside a div with responsive height - JSFiddle

    Comments (3)

      Works great for text - thanks - but not for menu items that just have a image? Is there a way to fix that?

      Alessandro (DevExpress Support) 8 years ago

        Hi,

        I have modified our original answer. Please review it.

          Perfect - thank you!

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.