时间戳

首页 > 解决方案 > 如何使下拉菜单居中

html - 如何使下拉菜单居中

问题描述

我正在尝试制作一个 NavBar，但每当我有一个下拉菜单时，我需要添加我需要决定是把它放在右边还是左边。任何人都可以帮助我使其成为中心。

我曾尝试使用浮动元素，但它并没有真正做任何事情

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;
       }

标签： htmlcssbootstrap-4

解决方案

我没有看到代码。你的父元素类 {display: flex; justify-content: center} 浮动不起作用 flex，bootstrap 是建立在 flex 上的

推荐阅读