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

• • Reply
  klgrube

  Member

  3 Points

  47 Posts

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

  Aug 30, 2017 08:24 PM|klgrube|LINK

  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.

• • Reply
  A2H

  All-Star

  50741 Points

  9877 Posts

  Re: Why can't I horizontally center an asp.net menu control on a web page?

  Aug 31, 2017 02:49 AM|A2H|LINK

  klgrube

  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

  Thanks,
  Aje
  My Blog | Dotnet Funda
• • Reply
  Deepak Panch...

  Contributor

  2990 Points

  1210 Posts

  Re: Why can't I horizontally center an asp.net menu control on a web page?

  Aug 31, 2017 07:45 AM|Deepak Panchal|LINK

  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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  klgrube

  Member

  3 Points

  47 Posts

  Re: Why can't I horizontally center an asp.net menu control on a web page?

  Sep 01, 2017 03:07 AM|klgrube|LINK

  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.

• • Reply
  klgrube

  Member

  3 Points

  47 Posts

  Re: Why can't I horizontally center an asp.net menu control on a web page?

  Sep 01, 2017 03:37 AM|klgrube|LINK

  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>

• • Reply
  klgrube

  Member

  3 Points

  47 Posts

  Re: Why can't I horizontally center an asp.net menu control on a web page?

  Sep 01, 2017 03:41 AM|klgrube|LINK

  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

• • Reply
  Deepak Panch...

  Contributor

  2990 Points

  1210 Posts

  Re: Why can't I horizontally center an asp.net menu control on a web page?

  Sep 01, 2017 06:22 AM|Deepak Panchal|LINK

  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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  klgrube

  Member

  3 Points

  47 Posts

  Re: Why can't I horizontally center an asp.net menu control on a web page?

  Sep 02, 2017 06:39 PM|klgrube|LINK

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

• • Reply
  Deepak Panch...

  Contributor

  2990 Points

  1210 Posts

  Re: Why can't I horizontally center an asp.net menu control on a web page?

  Sep 04, 2017 03:19 AM|Deepak Panchal|LINK

  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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.