问题：

相对于父菜单项，使用子菜单项将块居中

阳航

2023-03-14

我有一个侧边栏，带有子菜单项。这些子段落始终显示在离开区块的顶部。请告诉我如何使子菜单项相对于侧边栏中父菜单项的高度显示在中间。就像在照片上一样。感谢

[！[在此处输入图像描述][1][1][1]：https://i.stack.imgur.com/oEtuh.png

css lang-css prettyprint-override">.main {
  font-family: PT Sans;
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 100%;
}

.main_menu {
  display: flex;
  flex-direction: column;
  width: auto;
  background-color: #38618C;
  padding: 50px 0 0 0;
  z-index: 1;
  user-select: none;
}

.main_menu_content {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 50px;
  width: 100%;
}
.main_menu_content_list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  height: 700px;
  width: 250px;
}

.main_menu_content_list li {
  list-style-type: none;
}

.main_menu_content_list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  color: #D7DFE8;
  text-decoration: none;
}

.main_menu_content_list_submenu {
  justify-content: center;
  position: absolute;
  padding: 0;
  margin: 0;
  left: 100%;
  height: 100vh;
  background-color: #F0F6F8;
  box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.25);
  top: -50px;
  pointer-events: none;
  opacity: 0;
  display: none;
  transition: all linear 0.1s 0s;
  width: 250px;
}

.main_menu_content_list_submenu_popup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.main_menu_content_list > li.main_menu_content_list_arrow > a:after{
  content: '';
  position: absolute;
  border: solid 10px;
  border-color: transparent #F0F6F8 transparent transparent;
  right: 0;
  opacity: 0;
}

.main_menu_content_list > li.main_menu_content_list_arrow:hover > a:after{
  opacity: 1;
}

.main_menu_content_list li:hover .main_menu_content_list_submenu {
  opacity: 1;
  pointer-events: auto;
  display: flex;
}

.main_menu_content_list_submenu_popup li:first-child {
  margin: 50px 0 0 0;
}

.main_menu_content_list_submenu_popup li:not(:first-child) {
  margin: 10px 0 0 0;
}

.main_menu_content_list li:hover > .main_menu_content_list_submenu {
  display: flex;
}

.main_menu_content_list_submenu_popup a {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  color: #38618C;
}

.main_menu_content_list_submenu_popup a:hover {
  color: #38618C;
  text-decoration: underline;
}

.main_menu_content_list_submenu_popup a:active {
  color: #FF5964;
}

.main_content {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
}

<div class="main">
<div class="main_menu">
            <div class="main_menu_content">
                <ul class="main_menu_content_list">
                    <li class="main_menu_content_list_arrow"><a href="">
                            <div class="main_menu_content_list_int"></div>Интернет
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li><a class="" href="">Подключение</a></li>
                                <li><a href="">Дополнительные услуги</a></li>
                                <li><a href="">Настройка соединения</a></li>
                                <li><a href="">Подключенные дома</a></li>
                                <li><a href="">Документы</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="main_menu_content_list_arrow"><a href="">
                            <div class="main_menu_content_list_tv"></div>Телевидение
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li><a class="" href="">Подключение</a></li>
                                <li><a href="">Новости</a></li>
                                <li><a href="">Акции</a></li>
                                <li><a href="">Аналоговое ТВ</a></li>
                                <li><a href="">Оборудование</a></li>
                                <li><a href="">Настройка каналов</a></li>
                                <li><a href="">Подключенные дома</a></li>
                                <li><a href="">Документы</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="main_menu_content_list_arrow"><a href="/content/video.html">
                            <div class="main_menu_content_list_video"></div>Видеонаблюдение,<br>домофон
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li><a class="" href="">Подключение</a></li>
                                <li><a href="">Обслуживание</a></li>
                                <li><a href="">Установка</a></li>
                                <li><a href="">Заявка на ремонт</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="/content/rek.html">
                            <div class="main_menu_content_list_tvr"></div>ТВ Реклама
                        </a></li>
                    <li><a href="">
                            <div class="main_menu_content_list_intb"></div>Интернет для бизнеса
                        </a></li>
                    <div class="main_menu_content_list_sub_block">
                        <li><a href="">Оплата</a></li>
                        <li><a href="">О компании</a></li>
                    </div>
                    <li class="main_menu_content_list_arrow"><a href="">
                            <div class="main_menu_content_list_sub_account"></div>Личный кабинет
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li><a href="">Интернет</a></li>
                                <li><a href="">Телевидение</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="main_content">
        </div>
</div>

共有1个答案

龙弘盛

2023-03-14

因为您已经在使用flexbox，所以可以添加“justify content:center指向侧边栏的父级（.main_menu_content_list_submenu_popup），它将使li垂直居中。请记住，当弹性方向为列时，对齐内容将影响垂直对齐。

.main {
  font-family: PT Sans;
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 100%;
}

.main_menu {
  display: flex;
  flex-direction: column;
  width: auto;
  background-color: #38618C;
  padding: 50px 0 0 0;
  z-index: 1;
  user-select: none;
}

.main_menu_content {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 50px;
  width: 100%;
}
.main_menu_content_list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  height: 700px;
  width: 250px;
}

.main_menu_content_list li {
  list-style-type: none;
}

.main_menu_content_list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  color: #D7DFE8;
  text-decoration: none;
}

.main_menu_content_list_submenu {
  justify-content: center;
  position: absolute;
  padding: 0;
  margin: 0;
  left: 100%;
  height: 100vh;
  background-color: #F0F6F8;
  box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.25);
  top: -50px;
  pointer-events: none;
  opacity: 0;
  display: none;
  transition: all linear 0.1s 0s;
  width: 250px;
}

.main_menu_content_list_submenu_popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main_menu_content_list > li.main_menu_content_list_arrow > a:after{
  content: '';
  position: absolute;
  border: solid 10px;
  border-color: transparent #F0F6F8 transparent transparent;
  right: 0;
  opacity: 0;
}

.main_menu_content_list > li.main_menu_content_list_arrow:hover > a:after{
  opacity: 1;
}

.main_menu_content_list li:hover .main_menu_content_list_submenu {
  opacity: 1;
  pointer-events: auto;
  display: flex;
}

.main_menu_content_list_submenu_popup li:first-child {
  margin: 50px 0 0 0;
}

.main_menu_content_list_submenu_popup li:not(:first-child) {
  margin: 10px 0 0 0;
}

.main_menu_content_list li:hover > .main_menu_content_list_submenu {
  display: flex;
}

.main_menu_content_list_submenu_popup a {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  color: #38618C;
}

.main_menu_content_list_submenu_popup a:hover {
  color: #38618C;
  text-decoration: underline;
}

.main_menu_content_list_submenu_popup a:active {
  color: #FF5964;
}

.main_content {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
}

<div class="main">
<div class="main_menu">
            <div class="main_menu_content">
                <ul class="main_menu_content_list">
                    <li class="main_menu_content_list_arrow"><a href="">
                            <div class="main_menu_content_list_int"></div>Интернет
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li><a class="" href="">Подключение</a></li>
                                <li><a href="">Дополнительные услуги</a></li>
                                <li><a href="">Настройка соединения</a></li>
                                <li><a href="">Подключенные дома</a></li>
                                <li><a href="">Документы</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="main_menu_content_list_arrow"><a href="">
                            <div class="main_menu_content_list_tv"></div>Телевидение
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li><a class="" href="">Подключение</a></li>
                                <li><a href="">Новости</a></li>
                                <li><a href="">Акции</a></li>
                                <li><a href="">Аналоговое ТВ</a></li>
                                <li><a href="">Оборудование</a></li>
                                <li><a href="">Настройка каналов</a></li>
                                <li><a href="">Подключенные дома</a></li>
                                <li><a href="">Документы</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="main_menu_content_list_arrow"><a href="/content/video.html">
                            <div class="main_menu_content_list_video"></div>Видеонаблюдение,<br>домофон
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li><a class="" href="">Подключение</a></li>
                                <li><a href="">Обслуживание</a></li>
                                <li><a href="">Установка</a></li>
                                <li><a href="">Заявка на ремонт</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="/content/rek.html">
                            <div class="main_menu_content_list_tvr"></div>ТВ Реклама
                        </a></li>
                    <li><a href="">
                            <div class="main_menu_content_list_intb"></div>Интернет для бизнеса
                        </a></li>
                    <div class="main_menu_content_list_sub_block">
                        <li><a href="">Оплата</a></li>
                        <li><a href="">О компании</a></li>
                    </div>
                    <li class="main_menu_content_list_arrow"><a href="">
                            <div class="main_menu_content_list_sub_account"></div>Личный кабинет
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li><a href="">Интернет</a></li>
                                <li><a href="">Телевидение</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="main_content">
        </div>
</div>

类似资料：

字压菜单项子项

我正在努力为WordPress项目创建自定义菜单。我使用以下函数清理了菜单的标记。我目前遇到的问题是弄清楚如何将类添加到（如果它具有父菜单项）。我的菜单设置如下：主要项目主要项目子项目子项目我知道从代码的角度来看，我需要检查< code>$menu_item是否有子元素。在查看WordPress文档时，我看到有一个名为< code>$has_children的函数。但是我不知道确切的语法
菜单项

在程序菜单或上下文菜单中插入新的菜单项进程: 主进程您可以在 Menu末尾查看示例. new MenuItem(options) options Object click Function (可选) - 单击菜单项被调用 click(menuItem,browserWindow) menuItem MenuItem browserWindow BrowserWindow event Even
菜单项

菜单项添加菜单项到应用程序菜单和上下文菜单中进程：主进程有关示例, 请参见 Menu。 Class: MenuItem Add items to native application menus and context menus. Process: Main See Menu for examples. new MenuItem(可选) 参数 Object click Function (
菜单项

菜单项添加菜单项到应用程序菜单和上下文菜单中进程：主进程有关示例, 请参见 Menu。 new MenuItem(options) 选项对象 click 函数(可选) - 单击菜单项时，将用 click(menuItem, browserWindow, event) 调用。 menuItem MenuItem browserWindow BrowserWindow |未定义 - 如果没有打
Webview将菜单项添加到TextSelection菜单

我有一个android webview默认文本选择的问题。我想做的是添加一个项目到默认菜单，它出现在webview的文本选择上我想要的功能是添加一个按钮到左侧的全选。如何做到这一点
将图像动态应用于菜单项

我试图使用glide以编程方式将图像添加到菜单项。主菜单。xml Java 然而，我不能使用这种方法，因为资源是一个MenuItem而不是一个ImageView。将其转换为ImageView也不起作用。鉴于图像不在drawables文件夹中，由用户设置，因此也不能使用以下方法，我如何实现预期结果接受一个整数值最终结果

相对于父菜单项，使用子菜单项将块居中

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档