Question

我的网站菜单中的我的类容器被忽略，它不起作用，就好像它不存在一样。

我想知道如何制作menu__list，它具有绝对的位置，尊重类容器，它设置了此会话的极限。

这可能吗？

HTML：

<section class="menu">
  <div class="container">
    <ul class="menu__list">
      <li class="menu__item">
    <!--    <i class="fa fa-calendar fa-3x"></i>-->
      </li>
      <li class="menu__item">
    <!--    <i class="fa fa-calendar fa-3x"></i>-->
      </li>
      <li class="menu__item">
    <!--    <i class="fa fa-calendar fa-3x"></i>-->
      </li>
      <li class="menu__item">
    <!--    <i class="fa fa-calendar fa-3x"></i>-->
      </li>
      <li class="menu__item">
    <!--    <i class="fa fa-calendar fa-3x"></i>-->
      </li>
      <li class="menu__item">
    <!--    <i class="fa fa-calendar fa-3x"></i>-->
      </li>
      <li class="menu__item">
    <!--    <i class="fa fa-calendar fa-3x"></i>-->
      </li>
      <li class="menu__item">
    <!--    <i class="fa fa-calendar fa-3x"></i>-->
      </li>
      <li class="menu__item">
    <!--    <i class="fa fa-calendar fa-3x"></i>-->
      </li>
    </ul>
  </div>
</section>

CSS：

.container {
  padding-left: 5%;
  padding-right: 5%;
  margin-left: auto;
  margin-right: auto; }
  @media only screen and (min-width: 768px) {
    .container {
      padding-left: 4.8%;
      padding-right: 4.8%;
      max-width: 768px; } }
  @media only screen and (min-width: 992px) {
    .container {
      padding-left: 4.4%;
      padding-right: 4.4%;
      max-width: 992px; } }
.menu {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.8;
  text-align: center;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; }
  .menu__list {
    list-style: none;
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0;
    margin: 0; }
    @media only screen and (min-width: 768px) {
      .menu__list {
        width: 800px;
        height: 645px;
        margin-left: -400px;
        margin-top: -322px; } }
  .menu__item {
    margin: 5px;
    display: inline-block;
    background-color: #FFF;
    text-align: center;
    width: 90px;
    height: 90px; }
    @media only screen and (min-width: 768px) {
      .menu__item {
        width: 200px;
        height: 200px; } }
    .menu__item:hover {
      background-color: #000; }
    .menu__item .fa-calendar {
      width: 100%;
      height: 100%;
      color: #000;
      line-height: 200px;
      cursor: pointer; }
      .menu__item .fa-calendar:hover {
        color: #FFF; }

我试图使用位置相对，但menu__list从不垂直居中。

感谢!!!

Answer 1

只需将position relative添加到.container

即可

.container {
  padding-left: 5%;
  padding-right: 5%;
  margin-left: auto;
  margin-right: auto; 
  position:relative /**add this**/
}

考虑给它一个宽度和高度。

Answer 2

如果您希望.menu__list绝对尊重您的.container，您可以添加以下内容：

.container {
    ...
    position: relative;
}

如果我将内部div设置为绝对位置

2 个答案: