如何在asp.net中的div中垂直居中Menu控件

Question

我在asp.net webforms工作。 我在div元素中有一個Menu控件。 不知何故菜單不在div內。 它位於div的底部或外部。 我基本上希望將div保持為高度30px，並將菜單垂直顯示在中心。 以下是我的代碼：

    <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>

Answer 1

你可以給它一定的寬度和設置余量：0 auto;

<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設置為相對位置來完成，而child（mainnav）具有絕對值，具有以下邊距和一定高度30px;。

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

你的#mainnav還應該有：

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

你可能需要正確玩：0; 左：0;

Answer 2

使用我很久以前學到的這個技巧：

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

第二盤：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並完成！

Answer 3

有幾種方法可以將元素垂直居中於其他容器內部。 CSS Tricks對不同的選項有很好的寫作，包括你何時/應該使用每個選項。

最常見的答案，假設父級是未知高度而子級是塊級元素，使用相對和絕對定位，類似於上面的答案。

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

如何在asp.net中的div中垂直居中Menu控件

問題描述

3 個解決方案

解決方案1
0 2016-09-16 15:33:49

解決方案2
0 2016-09-16 15:49:58

解決方案3
0 2016-09-16 17:02:36

如何在asp.net中的div中垂直居中Menu控件

問題描述

3 個解決方案

解決方案1 0 2016-09-16 15:33:49

解決方案2 0 2016-09-16 15:49:58

解決方案3 0 2016-09-16 17:02:36

解決方案1
0 2016-09-16 15:33:49

解決方案2
0 2016-09-16 15:49:58

解決方案3
0 2016-09-16 17:02:36