Question

我创建了一个标题，其中一个div作为网站的主菜单，并添加了一些div作为主菜单项。我的问题是：如何在主菜单项中放置主菜单标题的垂直和水平内部div？我尝试了许多解决方案，如转换和flex展示风格，但遗憾的是没有任何效果。为什么CSS中没有像XAML那样的Horizontal / VerticalAlignment？

＆＃13;

body {
  margin: 0;
}

header {
  height: 50px;
  background-color: lightgrey;
}

#main-menu {
  margin: 0 auto;
  width: 1000px;
  height: inherit;
}

.main-menu-item {
  float: left;
  width: 100px;
  height: inherit;
}

.main-menu-header {
  display: block;
  height: inherit;
}

.main-submenu {
  width: inherit;
  word-wrap: break-word;
  /*display: none;*/
  list-style: none;
  margin-left: -40px;
  margin-top: 0px;
}

＆＃13;

<body>
  <header>
    <div id="main-menu">
      <div class="main-menu-item" onmouseover="ChangeDisplayOfSelectedSubmenu(0, 'block')" onmouseout="ChangeDisplayOfSelectedSubmenu(0, 'none')">
        <div class="main-menu-header">MenuItem1</div>
        <ul class="main-submenu">
          <li>SubMenuItem1</li>
          <li>SubMenuItem2</li>
          <li>SubMenuItem3</li>
        </ul>
      </div>

      <div class="main-menu-item" onmouseover="ChangeDisplayOfSelectedSubmenu(1, 'block')" onmouseout="ChangeDisplayOfSelectedSubmenu(1, 'none')">
        <div class="main-menu-header">MenuItem2</div>
        <ul class="main-submenu">
          <li>SubMenuItem1</li>
          <li>SubMenuItem2</li>
          <li>SubMenuItem3</li>
        </ul>
      </div>

      <div class="main-menu-item" onmouseover="ChangeDisplayOfSelectedSubmenu(2, 'block')" onmouseout="ChangeDisplayOfSelectedSubmenu(2, 'none')">
        <div class="main-menu-header">MenuItem3</div>
        <ul class="main-submenu">
          <li>SubMenuItem1</li>
          <li>SubMenuItem2</li>
          <li>SubMenuItem3</li>
        </ul>
      </div>
    </div>
  </header>

＆＃13;

Answer 1

简单地使用衬垫顶部和衬垫底部？

尝试CSS line-height Property Follor：https://www.w3schools.com/cssref/pr_dim_line-height.asp

你可以使用css旧技巧，使用它：

header{
    height:50px;
    display:block;
}

#main-menu{
    position:aboslute;
    top:50px;
    margin-top:-25px;
}

Answer 2

将CSS更改为以下内容 -

body {
  margin: 0;
}

header {
  height: 50px;
  background-color: lightgrey;
}

#main-menu {
    height: inherit;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.main-menu-item {
    float: left;
    width: 100px;
    /* height: 100%; */
    text-align: center;
}

.main-menu-header {
  display: block;
  height: inherit;
}

.main-submenu {
  width: inherit;
  word-wrap: break-word;
  /*display: none;*/
  list-style: none;
  margin-left: -40px;
  margin-top: 0px;
}

在此处使用flexbox属性以达到预期效果

中心主菜单标题在网站标题中

2 个答案: