如何使下拉菜单居中

时间:2019-08-07 17:58:11

标签: html css bootstrap-4

我试图制作一个NavBar,但是每当我有一个下拉菜单时,我都需要添加,我需要确定是将其放置在右侧还是左侧。谁能帮助我找到一种使之成为中心的方法。

我尝试使用float元素,但实际上并没有做任何事情

HTML:

<li class="dropdown">
    <a  href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Products
    </a>
    <div class="dropdown-menu dropdown-menu-doors-windows">
        <div class="row">
            <div class="col-md-6">
                <img class="pic-align" src="img/products/doors/doors_3.png" />
            </div>
            <div class="col-md-6">
                <img class="win-align" src="img/products/windows/windows_2.png" />
            </div>
        </div>
    </div>
</li>

CSS:

   .win-align {
      text-align: center;
      height: 250px;
      width: 190px;
      margin-bottom: 20px;
    }

  .dropdown-menu-doors-windows {
     width: 900px;
     height: 400px;
     border-top-right-radius: 15px;
     border-bottom-left-radius: 15px;
     border-bottom-right-radius: 15px;
     border-top-left-radius: 15px;
     opacity: 0.97;
   }

    .pic-align {
        text-align: center;
        height: 250px;
        width: 140px;
        margin-bottom: 20px;
       }

1 个答案:

答案 0 :(得分:0)

我看不到代码。您的父元素类{display:flex;证明内容:中心} 浮动不支持flex,bootstrap是基于flex构建的