将下拉菜单所在的 div 居中

问题描述 投票：0回答：1

我目前正在尝试为我的网站的移动设计制作一个下拉菜单。菜单应该出现在我的徽标下方，但下拉菜单所在的 div 与徽标不对齐，当我尝试移动此 div 时，会导致徽标的定位出现问题。我希望下拉菜单从标题的中心向下，无论屏幕尺寸如何。

这是与问题相关的CSS：

通用CSS：

#header {
  height:7em;
  background:black;
  display: flex;
  align-items: center
}

移动造型：


  h1 {
      font-size: 3em;
      text-align:center;
      padding: 0;
      margin: 0;
    }

    #shadowBox {
      width:100%;
      touch-action: manipulation;
      text-align:center;
      display: flex;
      justify-content:center; 
    }

#header {
      flex-wrap:wrap;
    }


    .dropdown {
      overflow: hidden;
    }
    
    .dropdown .dropbtn {
      font-size: 1em;
      border: none;
      outline: none;
      background-color: black;
      font-family: inherit;
      margin: 0;
      padding: 0;
    }
    
    .dropbtn {
      border: none;
      outline: none;
      background-color: black;
    }
    
    .dropdown-content {
      position: absolute;
      background-color: black;
      min-width: 10em;
      box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.2);
      z-index: 1;
      opacity: .85;
      top:7em;
    }
    
    .dropdown-content a {
      float: none;
      color: white;
      padding: 0.75em 1em;
      text-decoration: none;
      display: grid;
      text-align: center;
      width: 8em;
      margin:0;
    }
    
    .dropdown-content a:hover {
      background-color: #3c0025;
      transition: 0.5s;
    }
    
    .dropdown-content a:hover {
      color: #21f6c2;
    }
    
    .dropdown-content a:active {
      color: #d4f621;
    }
    
    .dropdown:hover .dropdown-content {
      display: grid;
    } 
    
    .hidden {
      display: none;
    }
}


    /* Mobile Fixing */
    @media (max-width: 931px) {
      .dropdown {
        display: inline-block;
      }
    
      #links {
        display: none;
      }
    
      .dropdown-content {
        display: none;
      }
    
      .dropdown:hover .dropdown-content {
        display: inline-block;
      }
    }

这是相关的 HTML：

    <div id="header">
      <div class="dropdown">
            <div class="dropdown-content">
              <a href="/#">home</a>
              <a href="/abt">about</a>
              <a href="/com">commissions</a>
              <a href="/img">portfolio</a>
              <a href="/cv">cv</a>
              <a href="/crd">credit</a>
            </div>
      </div>
    <div id="shadowBox">
          <button class="dropbtn">
            <h1 class="rainbow rainbow_text_animated">LOGO</h1>
          </button>
        </div>
          <div id="links">
            <a href="/#">home</a>
            <a href="/abt">about</a>
            <a href="/com">commissions</a>
            <a href="/img">portfolio</a>
            <a href="/cv">cv</a>
            <a href="/crd">credit</a>
        </div>
    </div>

我不确定所有 CSS 是否都是必需的或需要包含在我的问题中，我想确保包含我可能需要的所有内容。

我尝试调整显示类型，看看是否可以移动下拉菜单来源的 div，但这会移动徽标，我目前不确定如何制作具有我的徽标和下拉 div 的 div来自叠加。因此，我也尝试过 justify-content: center 和align-content:center，但我认为我做得不正确。 同样，我也尝试直接移动下拉内容菜单，但这会在调整窗口大小时引起问题，并且无论屏幕尺寸如何，我希望它保持在中心位置。 我什至尝试使用 ，尽管它已经贬值了，但奇怪的是，这也不起作用。

我愿意接受任何有关如何解决此问题的建议，这将有助于满足我的需求。非常感谢！

html css mobile
1个回答
0
投票

要纯粹使用

CSS
作为
dropdown
，我认为将
dropdown
及其
button
保持在同一个
container
中很重要。因此，我调整了您的 
HTML
以使其符合要求。然后我调整了你的
CSS
，使
logo
和
menu
可以显示在一个列中。我还设置了标准屏幕尺寸。由于您没有为 
CSS
和 
rainbow
添加 
rainbow_text_animated
，所以我将 
logo
颜色设置为白色。当您将这个 
code
调整到您的中时，您可以更改/删除它。

现在，在桌面视图中，

#links
菜单将出现在
logo
下方，而在平板电脑/移动设备视图中它将消失。当用户将鼠标悬停在 
logo
上时，将会出现 
dropdown
。

#header {
  height: 7em;
  background: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

h1 {
  font-size: 3em;
  text-align: center;
  padding: 0;
  margin: 0;
  color: #fff;
}

#shadowBox {
  touch-action: manipulation;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative;
}

.dropbtn {
  font-size: 1em;
  border: none;
  outline: none;
  background-color: black;
  font-family: inherit;
  margin: 0;
  padding: 0;
}

#shadowBox::after {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 5em;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 10em;
  box-shadow: 0em 0.5em 1em 0em rgba(0, 0, 0, 0.2);
  z-index: 1;
  opacity: 0.85;
  top: 5.2em;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 0.75em 1em;
  text-decoration: none;
  display: block;
  text-align: center;
  width: 8em;
  margin: 0;
}

.dropdown-content a:hover {
  background-color: #3c0025;
  color: #21f6c2;
  transition: 0.5s;
}

.dropdown-content a:active {
  color: #d4f621;
}

@media (max-width: 990px) {
  #links {
    display: none;
  }

  #shadowBox:hover .dropdown-content,
  .dropdown-content:hover {
    display: grid;
  }

  #header {
    justify-content: center;
  }
}
<html>
  <head>
    <title>Flip text</title>
  </head>

  <body>
    <div id="header">
      <div id="shadowBox">
        <button class="dropbtn">
          <h1 class="rainbow rainbow_text_animated" style="color: #fff">
            LOGO
          </h1>
        </button>
        <div class="dropdown-content">
          <a href="/#">home</a>
          <a href="/abt">about</a>
          <a href="/com">commissions</a>
          <a href="/img">portfolio</a>
          <a href="/cv">cv</a>
          <a href="/crd">credit</a>
        </div>
      </div>
      <div id="links">
        <a href="/#">home</a>
        <a href="/abt">about</a>
        <a href="/com">commissions</a>
        <a href="/img">portfolio</a>
        <a href="/cv">cv</a>
        <a href="/crd">credit</a>
      </div>
    </div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.