无Flex实现导航栏Logo图片与导航文本垂直居中对齐问题

问题根源 #

你的代码中.Logo设置为display:block会独占一行，导致导航菜单被挤至下方；同时未对导航容器设置同排对齐及垂直居中样式，且header的height:10%与.Logo的固定高度存在冲突，最终导致垂直居中失效。

修改后的完整CSS代码 #

/* Controla tam img */
img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* header (navbar) */
.Logo {
    display: inline-block; /* 改为inline-block，允许与其他元素同排 */
    vertical-align: middle; /* 与导航垂直居中对齐 */
    height: 100px;
    width: 200px;
}

header {
    position: fixed;
    width: 100%;
    min-height: 120px; /* 匹配Logo高度+内边距，避免内容溢出 */
    padding: 10px 30px;
    background-color: #DDA15E;
    transition: all .50s ease;
    box-sizing: border-box; /* 内边距不增加总宽度 */
}

nav {
    display: inline-block; /* 与Logo同排显示 */
    vertical-align: middle; /* 垂直居中对齐 */
    margin-left: 20px; /* 可选：增加Logo与导航的间距 */
}

.Links {
    margin: 0; /* 清除ul默认外边距 */
    padding: 0; /* 清除ul默认内边距 */
}

.Links a {
    color: #283618;
    font-size: 1.5rem;
    font-weight: 200;
    padding: 5px 0;
    margin: 0px 30px;
    transition: all .50s ease;
}

.Links li {
    display: inline-block; /* 比inline更可控，支持更多样式 */
    padding-right: 5px;
}

.Links a:hover {
    text-shadow: #283618 1px 1px;
    color: #ff7b08;
}

关键修改说明 #

• .Logo和nav的display: inline-block：让两个元素在同一行显示，解决导航被挤到下方的核心问题。
• vertical-align: middle：为.Logo和nav添加该属性，使两个inline-block元素基于中线垂直对齐，实现Logo与导航文本的居中效果。
• box-sizing: border-box：确保header的内边距不会额外增加宽度，避免布局超出屏幕范围。
• 清除.Links默认边距：消除浏览器自带的ul样式偏差，让导航布局更精准。
• 调整header高度：用min-height:120px匹配Logo高度+上下内边距，保证内容不会溢出导航栏。

内容的提问来源于stack exchange，提问作者Franco