如何在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