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元素位置的父级：绝对;

你的#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 has a great writeup，包括何时可以/应该使用每个选项。

最常见的答案，假设父级高度未知且子级是块级元素，使用相对和绝对定位，类似于上面的答案。

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

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

3 个答案: