如何將菜單控件垂直居中在asp.net中的div內

我正在asp.net webforms中工作。我有一個div元素內的Menu控件。不知何故菜單不會留在div中。它要麼在div的底部，要麼在div的外部。我基本上想要保持高度30px的div和菜單垂直顯示在中心。以下是我的代碼：如何將菜單控件垂直居中在asp.net中的div內

<div id="mainnav" style="height:30px"> 
    <asp:Menu ID="menuBarMaster" runat="server" Orientation="Horizontal" Width="100%" 
      CssClass="flyout-menu" MaximumDynamicDisplayLevels="10" ClientIDMode="Static" 
      StaticPopOutImageUrl = "images/blue_right_arrow_silk.png" 
      DynamicPopOutImageUrl = "images/blue_right_arrow_silk_small.png">    
      <StaticMenuStyle CssClass="staticMenuItem" /> 
      <StaticHoverStyle CssClass="staticHoverStyle"></StaticHoverStyle>    
      <StaticMenuItemStyle CssClass="staticMenuItemStyle" /> 
      <StaticSelectedStyle CssClass="staticSelectedStyle" />    
      <DynamicMenuItemStyle CssClass="dynamicMenuItemStyle" /> 
      <DynamicHoverStyle CssClass="dynamicHoverStyle" /> 
      <DynamicMenuStyle CssClass="dynamicMenuStyle" /> 
     </asp:Menu> 
</div>

來源

2016-09-16 Massey

你可以給它一定的寬度，並設置保證金：0汽車;

<div id="mainnav" style="height:30px; background: #000; width: 100px; margin: 0 auto;"> 
    <asp:Menu ID="menuBarMaster" runat="server" Orientation="Horizontal" Width="100%" 
    CssClass="flyout-menu" MaximumDynamicDisplayLevels="10" ClientIDMode="Static" 
    StaticPopOutImageUrl = "images/blue_right_arrow_silk.png" 
    DynamicPopOutImageUrl = "images/blue_right_arrow_silk_small.png"> 
    <StaticMenuStyle CssClass="staticMenuItem" /> 
    <StaticHoverStyle CssClass="staticHoverStyle"></StaticHoverStyle> 
    <StaticMenuItemStyle CssClass="staticMenuItemStyle" /> 
    <StaticSelectedStyle CssClass="staticSelectedStyle" /> 
    <DynamicMenuItemStyle CssClass="dynamicMenuItemStyle" /> 
    <DynamicHoverStyle CssClass="dynamicHoverStyle" /> 
    <DynamicMenuStyle CssClass="dynamicMenuStyle" /> 
    </asp:Menu> 
</div>

垂直對齊可以通過父的div設置爲相對位置和兒童（mainnav）完成具有絕對具有以下利潤率和30像素的一定高度;.

設置爲#mainnav元素的父元素position：absolute;

您#mainnav也應該有：

position: absolute; 
top: 50%; 
margin-top: 30px;

你可能會需要有正確的發揮：0;左：0;

來源

2016-09-16 15:33:49 Evgeny

這將使菜單水平居中但我需要垂直居中。我已經相應地更新了這個問題。 – Massey

啊！沒問題！你不介意絕對的位置？ – Evgeny

用這一招我早就瞭解到：

首先設置菜單的寬度和高度。

第二個機頂盒：50％和位置：絕對。

三集的margin-top：-height/2

例

<HTML> 
<Head><title>A page</title></Head> 
<Body> 
<div style="height: 300px; width: 500px; background-color: blue; position: absolute;"> 
<div style="height: 100px; width: 100px; background-color: red; top: 50%; margin-top: -50px; position: absolute;"> 

</div> 
</div> 
</Body> 
</HTML>

你會得到這樣的事情：

如果要居中水平太，那麼你必須設置margin-left：-width/2並完成！

來源

2016-09-16 15:49:58 TwoDent

有幾種方法可以將元素垂直居中放置在其他容器中。 CSS Tricks has a great writeup上的不同選項，包括何時可以/應該使用每個選項。

最一般的答案，假設父母身高未知，孩子是一個塊級元素，使用相對和絕對定位，類似於上面的答案。

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}

來源

2016-09-16 17:02:36 ChimericDream

如何將菜單控件垂直居中在asp.net中的div內

回答

相關問題