菜单不是中心对齐的

时间:2016-08-15 11:59:50

标签: html asp.net twitter-bootstrap css3

您正在使用从数据库获取动态菜单的网站。我的问题是菜单不是中心对齐的。它只显示在它的托管div的左上角。以下是代码:

<div class="row">
                <div class="col-md-2 col-lg-2 col-sm-2 col-xs-12">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/offerboxindialogo9.png" class="img img-responsive"/>
                </div>
                <div class="col-md-8 col-lg-8 col-sm-8 col-xs-12">
                    <div class="navbar">
                        <asp:Menu ID="NavigationMenu" runat="server" class="mymenu" DynamicHorizontalOffset="2" Font-Bold="True" Font-Names="Verdana" 
                                        Font-Size="Smaller" ForeColor="white" Orientation="Horizontal" StaticSubMenuIndent="10px" 
                                        StaticEnableDefaultPopOutImage="false" DynamicEnableDefaultPopOutImage="false" 
                                        RenderingMode="List" Width="100%">
                                        <DataBindings>
                                            <asp:MenuItemBinding DataMember="Item" NavigateUrlField="url" TextField="Text" ValueField="Value" />
                                            <asp:MenuItemBinding DataMember="SubItem" NavigateUrlField="url" TextField="Text" ValueField="Value" />
                                        </DataBindings>
                                        <DynamicHoverStyle BackColor="purple" ForeColor="White" />
                                        <DynamicMenuItemStyle HorizontalPadding="10px" VerticalPadding="10px" ForeColor="purple" BackColor="White"/>
                                        <DynamicMenuStyle BorderWidth="2px" BorderColor="#990000" ForeColor="purple" />
                                        <DynamicSelectedStyle BackColor="#FFCC66" />
                                        <StaticHoverStyle BackColor="purple" ForeColor="White" CssClass="hoverstyle" />
                                        <StaticMenuItemStyle HorizontalPadding="10px" VerticalPadding="10px" />
                                        <StaticSelectedStyle BackColor="#FFCC66" />
                        </asp:Menu>
                    </div>
                </div>
                <div class="col-md-2 col-lg-2 col-sm-2 col-xs-12">
    </div>
</div>

我已尝试过css中的所有内容,包括float:none,display:inline,Center标记,vertical-align:middle,甚至尝试使用以下我在堆栈溢出的类似帖子中作为答案:

.mymenu>ul>li>a
{
    line-height: 50px;
}

也试过了     .mymenu ul li a     {         line-height:50px;     } 并尝试过     .mymenu + ul + li a     {         line-height:50px;     } 但没有什么能完美的。这三次尝试中的第一次尝试的问题是它也影响了下拉菜单项。

<div class="row">
                <div class="col-md-2 col-lg-2 col-sm-2 col-xs-12">
                    <img id="Image1" class="img img-responsive" src="images/offerboxindialogo9.png" />
                </div>
                <div class="col-md-8 col-lg-8 col-sm-8 col-xs-12">
                    <div class="nav navbar-nav">
                        <a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="" width="0" height="0" style="border-width:0px;" /></a><div class="mymenu" id="NavigationMenu">
<ul class="level1">
    <li><a class="level1" href="#" >Home</a></li><li><a class="level1">Shopping</a><ul class="level2">
        <li><a class="level2">Electronics</a><ul class="level3">
        </ul></li><li><a class="level2">MEN</a><ul class="level3">
            <li><a class="level3" href="#" >Mobile & Tablets</a></li><li><a class="level3" href="#" >Computer & Laptop</a></li><li><a class="level3" href="#" >Mobile & Computer Accessories</a></li><li><a class="level3" href="#" >TVs & Camera</a></li><li><a class="level3" href="#" >TVs & Camera Accessories</a></li><li><a class="level3" href="#" >Wearables</a></li><li><a class="level3" href="#" >Network Components</a></li><li><a class="level3" href="#" >Home Entertainment</a></li><li><a class="level3" href="#" >Air Conditioners</a></li><li><a class="level3" href="#" >Refrigerators</a></li><li><a class="level3" href="#" >Washing Machine</a></li><li><a class="level3" href="#" >Kitchen Appliances</a></li><li><a class="level3" href="#" >Small Home Appliances</a></li><li><a class="level3" href="#" >More</a></li>
            <li><a class="level3" href="#" >Footwear</a></li><li><a class="level3" href="#" >Clothing</a></li><li><a class="level3" href="#" >Watches</a></li><li><a class="level3" href="#" >Accessories</a></li><li><a class="level3" href="#" >Personal Care Appliances</a></li><li><a class="level3" href="#" >Grooming</a></li><li><a class="level3" href="#" >Featured</a></li>
        </ul></li><li><a class="level2">WOMEN</a><ul class="level3">
            <li><a class="level3" href="#" >Clothing1</a></li>
        </ul></li><li><a class="level2" href="#" >BABY & KIDS</a></li>
    </ul></li><li><a class="level1" href="#" >Festive Offers</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
                    </div>
                </div>
                <div class="col-md-2 col-lg-2 col-sm-2 col-xs-12">

0 个答案:

没有答案