locked
Why can't I horizontally center an asp.net menu control on a web page? RRS feed

  • Question

  • User-1691979634 posted

    WOW.

    I've spent an entire day wasting my time trying to figure out how to simply center an asp.net menu control in a web page.

    I've tried centering in a div.  No luck.

    I've tried centering in a table column.  No luck.

    Oh, I've found lots of so-called answers with way-too complicated CSS styling by googling the problem, none of which worked for something that should be incredibly simple.

    What is the deal?

    So, I'll ask you all here before I completely give up and leave it looking lousy flush left on the page.  Yuck.

    How do I center an ASP.net menu control horizontally (not vertically) in a web page.  I just want the menu displayed at the top of the page to be centered.  I hope someone here can give me some real answers that actually work.

    Wednesday, August 30, 2017 8:24 PM

All replies

  • User2103319870 posted

    How do I center an ASP.net menu control horizontally

    You could try with below code

    <style>
               
    
                .main_menu {
                    width: 100px;
                    text-align: center;
                     background-color: #8AE0F2;
                    height: 30px;
                    line-height: 30px;
                    margin-right: 5px;
                     color: #008000;
                }
    
                .level_menu {
                    width: 110px;
                    text-align: center;
                     background-color: #8AE0F2;
                    height: 30px;
                    line-height: 30px;
                    margin-top: 5px;
                     color: #008000;
                }
    
            </style>
            <asp:Menu ID="Menu1" runat="server" RenderingMode="List" Orientation="Horizontal" 
                StaticMenuItemStyle-VerticalPadding="10px"
                StaticMenuItemStyle-HorizontalPadding="10px">
                <LevelMenuItemStyles>
                    <asp:MenuItemStyle CssClass="main_menu" />
                    <asp:MenuItemStyle CssClass="level_menu" />
                </LevelMenuItemStyles>
                <Items>
                    <asp:MenuItem Text="File" Value="File">
                        <asp:MenuItem Text="New" Value="New"></asp:MenuItem>
                        <asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="Edit" Value="Edit">
                        <asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>
                        <asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="View" Value="View">
                        <asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>
                        <asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>
                    </asp:MenuItem>
                </Items>
            </asp:Menu>

    Source URL

    Thursday, August 31, 2017 2:49 AM
  • User347430248 posted

    Hi klgrube,

    you can try this.

     <div style="margin:0 auto 0 auto; width:750px;">
    <asp:Menu ID="nav" runat="server" Orientation="Horizontal" BorderColor="Blue" Font-Size="XX-Large" 
    StaticMenuItemStyle-BackColor = "Pink" StaticMenuItemStyle-HorizontalPadding = "11"> <Items> <asp:MenuItem Text="Articles" Value="New Item"></asp:MenuItem> <asp:MenuItem Text="Wiki" Value="New Item"></asp:MenuItem> <asp:MenuItem Text="Forums" Value="New Item"></asp:MenuItem> <asp:MenuItem Text="Links" Value="New Item"></asp:MenuItem> <asp:MenuItem Text="Links" Value="New Item"></asp:MenuItem> <asp:MenuItem Text="Links" Value="New Item"></asp:MenuItem> <asp:MenuItem Text="Links" Value="New Item"></asp:MenuItem> </Items> </asp:Menu> </div>

    Output:

    Regards

    Deepak

    Thursday, August 31, 2017 7:45 AM
  • User-1691979634 posted

    a2h,

    Thank you, but I don't see that you've applied the style to the menu or to a div surrounding it, which would make it much more helpful.  Can you do that and show me?  I'd appreciate it.

    Friday, September 1, 2017 3:07 AM
  • User-1691979634 posted

    I'm sorry, Deepak, but I tried that techique and it didn't work.  I don't know why.    Here's my code . . . 
    I can't believe this is so awkward!

    Karen

           <div id="MenuStyle" runat="server" style="height: 35px; width: 1000px; margin-top: 80px; margin-left: auto; margin-right: auto;">
                 <asp:Menu ID="menuBar" RenderingMode="Table" runat="server" Orientation="Horizontal" IncludeStyleBlock="False"
                     DynamicHorizontalOffset="20" Font-Names="Roboto" Font-Size="Medium" ForeColor="White"
                     StaticSubMenuIndent="10px"
                     DynamicMenuStyle-ForeColor="White" Font-Bold="False"
                     MaximumDynamicDisplayLevels="2">
                    <DynamicMenuItemStyle ItemSpacing="40px" />
                    <DynamicHoverStyle BackColor="#141C4A" ForeColor="#F5C802" Font-Bold="True" />
                    <DynamicMenuItemStyle HorizontalPadding="10px" VerticalPadding="2px" />
                    <DynamicMenuStyle BackColor="#141C4A" />
                    <DynamicSelectedStyle BackColor="#2B69B4" BorderStyle="Groove" Font-Bold="True" ForeColor="White" />
                     <Items>
                         <asp:MenuItem NavigateUrl="~/Home.aspx" Target="_parent" Text="Home" Value="Home" >  </asp:MenuItem>
                         <asp:MenuItem NavigateUrl="~/About.aspx" Target="_parent" Text="About" Value "About" >
     </asp:MenuItem>
                         <asp:MenuItem NavigateUrl=~/Contact.aspx" Target="_parent" Text="Contact" Value "Contact">
     </asp:MenuItem>
                     </Items>
                    <StaticHoverStyle BackColor="#141C4A" ForeColor="#F5C802" Font-Bold="True" />
                    <StaticMenuItemStyle ItemSpacing="10px" />
                    <StaticMenuStyle BackColor="#141C4A" />
                    <StaticSelectedStyle BackColor="#2B69B4" ForeColor="White" Font-Bold="True" />
                    <StaticMenuItemStyle HorizontalPadding="10px" VerticalPadding="2px" />
                </asp:Menu>
            </div>

    Friday, September 1, 2017 3:37 AM
  • User-1691979634 posted

    So, I've been struggling with this again for most of another day.  I create divs, and the control doesn't appear inside of them.  I create tables with a single row, and the control doesn't appear inside the table row.  It's as though the menu control has absolutely no clue about where it's being placed or what else is surrounding it.  I am so frustrated!  I hope someone can come up with something that actually works.

    Karen

    Friday, September 1, 2017 3:41 AM
  • User347430248 posted

    Hi klgrube,

    I try to check your code.

    I find that there are some error in your code.

    below is the corrected code:

    <div id="MenuStyle" runat="server" style="height: 35px; width: 750px; margin:0 auto 0 auto;">
                 <asp:Menu ID="menuBar" RenderingMode="Table" runat="server" Orientation="Horizontal" IncludeStyleBlock="False"
                     DynamicHorizontalOffset="20" Font-Names="Roboto" Font-Size="Medium" ForeColor="White"
                     StaticSubMenuIndent="10px"
                     DynamicMenuStyle-ForeColor="White" Font-Bold="False"
                     MaximumDynamicDisplayLevels="3">
                    <DynamicMenuItemStyle ItemSpacing="40px" />
                    <DynamicHoverStyle BackColor="#141C4A" ForeColor="#F5C802" Font-Bold="True" />
                    <DynamicMenuItemStyle HorizontalPadding="10px" VerticalPadding="2px" />
                    <DynamicMenuStyle BackColor="#141C4A" />
                    <DynamicSelectedStyle BackColor="#2B69B4" BorderStyle="Groove" Font-Bold="True" ForeColor="White" />
                     <Items>
                         <asp:MenuItem NavigateUrl="~/Home.aspx" Target="_parent" Text="Home" Value="Home" >  </asp:MenuItem>
                         <asp:MenuItem NavigateUrl="~/About.aspx" Target="_parent" Text="About" Value= "About" >
                            
     </asp:MenuItem>
                         <asp:MenuItem NavigateUrl="~/Contact.aspx" Target="_parent" Text="Contact" Value= "Contact">
    
     </asp:MenuItem>
                     </Items>
                    <StaticHoverStyle BackColor="#141C4A" ForeColor="#F5C802" Font-Bold="True" />
                    <StaticMenuItemStyle ItemSpacing="10px" />
                    <StaticMenuStyle BackColor="#141C4A" />
                    <StaticSelectedStyle BackColor="#2B69B4" ForeColor="White" Font-Bold="True" />
                    <StaticMenuItemStyle HorizontalPadding="10px" VerticalPadding="2px" />
                </asp:Menu>
                            
            </div>

    also you need to set the margin :0 auto 0 auto.

    Output:

    now you just need to adjust it as per your requirement.

    Regards

    Deepak

    Friday, September 1, 2017 6:22 AM
  • User-1691979634 posted

    Thanks for your help, Deepak.   I have this centering well now thanks to you.

    Saturday, September 2, 2017 6:39 PM
  • User347430248 posted

    Hi klgrube,

    I can see that your issue is solved now but you did not mark the answer.

    as a result , this thread is still active and open.

    I suggest you to mark the appropriate suggestion as an answer which helped you to solve the issue.

    until you mark the answer, this thread will remain open.

    so once you get the solution for your issue then try to mark the answer.

    it will help other community members in future who will going to meet the issue like yours.

    Regards

    Deepak

    Monday, September 4, 2017 3:19 AM