Как вертикально центрировать элемент управления меню в div в asp.net

Я работаю в asp.net webforms. У меня есть элемент управления Menu в элементе div. Каким-то образом меню не остается в пределах div. Это либо внизу дна, либо вне его. Я по существу хочу, чтобы div был высотой 30 пикселей, а меню отображалось вертикально по центру. Ниже приведен мой код:Как вертикально центрировать элемент управления меню в div в asp.net

<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) имеет абсолютный со следующими полями и определенной высотой 30px ;.

установлен на родителя элемента #mainnav position: absolute;

ваш #mainnav также должны иметь:

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

Вы, вероятно, нужно играть с правом: 0; left: 0;

источник

2016-09-16 15:33:49 Evgeny

Это будет центральное меню горизонтально, но мне нужно центрировать вертикально. Я соответствующим образом обновил этот вопрос. – Massey

Ах! Нет проблем! Вы не возражаете против абсолютной позиции? – Evgeny

Используйте этот трюк я узнал давно:

первых Устанавливает ширину и высоту меню.

Второй комплект: 50% и положение: абсолютное.

Третий набор Маржа-топ: -высота/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

Как вертикально центрировать элемент управления меню в div в asp.net

ответ

Смежные вопросы