居中 class 元素

Question

请帮帮我...我不知道为什么会这样，但我找不到任何不起作用的原因。我认为它与使用的库有关，但是 - 老实说 - 我不知道是什么导致了这个问题。

哦，问题（差点忘了说我不能解决的是什么）：如果你打开它，你可以看到下拉菜单没有居中。但是，它应该是。问题是：为什么它不居中？我尝试了不同的东西，比如标准的“margin: 0 auto;”并尝试使用 flexbox，但没有任何成功...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <style>
    .btn.btn-secondary.dropdown-toggle {
      background-color: #cacaca;
      color: white;
      padding: 16px;
      margin-top: 5%;
      font-size: 16px;
      border:none;
      width: 100%;
      font-family: 'Noto Sans JP', sans-serif;
    }

    .dropdown {
      position: relative;
      text-align: center;
      padding-bottom: 10%;
      padding: 20px;
    }

    .dropdown-menu {
      text-align: center!important;
      background-color: #f1f1f1;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1000;
      display: absolute;
      width: 50%;
      margin: 0 auto!important;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-item  {
      padding: 12px 16px!important;
    }

    .aktiv a{
      text-decoration: underline #3555ff;
      color: #3555ff!important;
    }
  </style>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>

  <div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Portfolio
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <div class="aktiv">
        <a class="dropdown-item" href="#">Button 1</a>
      </div>
      <a class="dropdown-item" href="#">Button 2</a>
      <a class="dropdown-item" href="#">Button 3</a>
      <a class="dropdown-item" href="#">Button 4</a>
      <a class="dropdown-item" href="#">Button 5</a>
      <a class="dropdown-item" href="#">Button 6</a>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script></body>
</html>

Answer 1

在这种特殊情况下，将 transform: translate3d(50%, 109px, 0) !important; 添加到 .dropdown-menu class CSS 规则（并删除边距）会有所帮助。

这将覆盖您的一个 JS 脚本在单击时添加的设置 - 更改的一个基本设置是 translate3d 的第一个参数，水平居中应为 50%。其余保持原样。

但对于“真正的”、持久的解决方案，您应该更改 javascript 中的值。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <style>
    .btn.btn-secondary.dropdown-toggle {
      background-color: #cacaca;
      color: white;
      padding: 16px;
      margin-top: 5%;
      font-size: 16px;
      border:none;
      width: 100%;
      font-family: 'Noto Sans JP', sans-serif;
    }

    .dropdown {
      position: relative;
      text-align: center;
      padding-bottom: 10%;
      padding: 20px;
    }

    .dropdown-menu {
      text-align: center!important;
      background-color: #f1f1f1;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1000;
      display: absolute;
      width: 50%;
      transform: translate3d(50%, 109px, 0) !important;

    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-item  {
      padding: 12px 16px!important;
    }

    .aktiv a{
      text-decoration: underline #3555ff;
      color: #3555ff!important;
    }
  </style>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>

  <div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Portfolio
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <div class="aktiv">
        <a class="dropdown-item" href="#">Button 1</a>
      </div>
      <a class="dropdown-item" href="#">Button 2</a>
      <a class="dropdown-item" href="#">Button 3</a>
      <a class="dropdown-item" href="#">Button 4</a>
      <a class="dropdown-item" href="#">Button 5</a>
      <a class="dropdown-item" href="#">Button 6</a>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script></body>
</html>

Answer 2

我无法仅使用 css 来实现这一点，而是制作了一些 js 函数。

看看再告诉我

$('.dropdown').on('show.bs.dropdown', function () {
  var menu = $(this).find(".dropdown-menu");
  var item = $(this)
  // position the menu in the center
  menu.attr('style', function(i,s) { return (s || '') + "margin-left:" +((item.outerWidth() / 2) - menu.width() / 2)+ "px !important;" });
})

.btn.btn-secondary.dropdown-toggle {
      background-color: #cacaca;
      color: white;
      padding: 16px;
      margin-top: 5%;
      font-size: 16px;
      border:none;
      width: 100%;
      font-family: 'Noto Sans JP', sans-serif;
    }

    .dropdown {
      position: relative;
      text-align: center;
      padding-bottom: 10%;
      padding: 20px;
    }

    .dropdown-menu {
      text-align: center!important;
      background-color: #f1f1f1;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1000;
      display: absolute;
      width: 50%;
      margin: 0 auto!important;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-item  {
      padding: 12px 16px!important;
    }

    .aktiv a{
      text-decoration: underline #3555ff;
      color: #3555ff!important;
    }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Portfolio
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <div class="aktiv">
        <a class="dropdown-item" href="#">Button 1</a>
      </div>
      <a class="dropdown-item" href="#">Button 2</a>
      <a class="dropdown-item" href="#">Button 3</a>
      <a class="dropdown-item" href="#">Button 4</a>
      <a class="dropdown-item" href="#">Button 5</a>
      <a class="dropdown-item" href="#">Button 6</a>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

居中 class 元素

Centering a class element

html

css

centering