center menu of dropdown-CodePudding

I have a bootstrap drop down what I'm trying to achieve is how can I center the drop-down menu to the center of the button? Right now it's being aligned to the left or right of the button based on the available space on the area. Thanks in advance.

.dropdown {
  margin-left: 40%;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<div >
  <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
  <ul  aria-labelledby="dropdownMenuButton1">
    <li><a >option 1</a></li>
    <li><a >option 2</a></li>
    <li><a >option 3</a></li>
  </ul>
</div>

CodePudding user response：

One way to do this would be to use transform: translate(calc(-50% 20px), 40px);.

I had to add !important in the example, but if you have access to the code that is setting the style attribute on the menu, you can update the transform there instead.

.dropdown {
  margin-left: 40%;
}
.dropdown-menu {
  transform: translate(calc(-50%   20px), 40px) !important;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<div >
  <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i ></i>
                    </button>
  <ul  aria-labelledby="dropdownMenuButton1">
    <li><a >option 1</a></li>
    <li><a >option 2</a></li>
    <li><a >option 3</a></li>
  </ul>
</div>