asp.netのdiv内のメニューコントロールを垂直方向に中央に配置する方法

私はasp.net webformsで作業しています。私はdiv要素内にMenuコントロールを持っています。どういうわけかメニューはdiv内にとどまりません。これは、divの下部またはその外側にあります。私は基本的にdivを高さ30pxに保ち、メニューを中央に垂直に表示したい。以下は私のコードです：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>

垂直方向の配置は、相対位置と子（mainnav）に親DIV設定を介して行うことができる30px以下のマージン絶対及び一定高さを有する;.

#mainnav要素の親に設定されています。

あなた#mainnavも持っている必要があります。

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

あなたはおそらく正しいで再生する必要があります：0;左：0;

出典

2016-09-16 15:33:49 Evgeny

これはメニューを横に中央に配置しますが、縦方向に中央に配置する必要があります。私はそれに応じて質問を更新しました。 – Massey

ああ！問題ない！絶対的な位置を気にしないでください？ – Evgeny

は、私はずっと前に学んだこのトリックを使用します。

まず、メニューの幅と高さを設定します。

第2セットトップ：50％および位置：絶対。

第三セットマージントップ：あなたはあまりにも水平方向の中心にしたい場合は

：-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内のメニューコントロールを垂直方向に中央に配置する方法

答えて

関連する問題