可以使用CSS来实现将标志居中在菜单中的效果。以下是一种可能的解决方法:
HTML代码:
CSS代码:
.menu {
display: flex;
align-items: center;
justify-content: space-between;
}
.menu-items {
list-style: none;
display: flex;
}
.menu-items li {
margin-right: 10px;
}
.logo {
flex: 1;
text-align: center;
}
.logo img {
max-width: 100%;
height: auto;
}
解释:
display: flex
将菜单容器.menu
设置为弹性布局。align-items: center
将菜单容器中的子元素垂直居中对齐。justify-content: space-between
将菜单容器中的子元素水平分散对齐,使标志居中。display: flex
将菜单项容器.menu-items
设置为弹性布局。list-style: none
去掉菜单项的默认列表样式。margin-right
给菜单项之间添加一定的间距。flex: 1
让标志容器.logo
占据剩余的空间。text-align: center
将标志图片居中对齐。max-width: 100%
使标志图片宽度适应父容器,保持其宽高比。