如何将导航栏内的inline-block元素居中对齐？

云原生阿岚

2026-8-12

导航栏内inline-block按钮居中解决方案

问题分析

你尝试的align-items: center是Flex布局的垂直对齐属性，且需要父容器先设置display: flex才会生效，而你要实现的是水平居中，所以这个属性不适用。下面给你两种简单可行的解决方法：

方法一：Flex布局法（推荐）

通过给导航栏容器设置Flex布局，直接让子元素水平居中，这种方式更灵活，还能方便调整垂直对齐和元素间距：

.navbar {
  display: flex;
  justify-content: center; /* 水平居中子元素 */
  gap: 8px; /* 可选：给按钮之间添加间距，避免挤在一起 */
  /* 若需要垂直居中，可添加以下两行 */
  /* height: 70px; */
  /* align-items: center; */
}

.navbar a:link, .navbar a:visited {
    background-color: goldenrod;
    color: black;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: larger;
}

.navbar a:hover, .navbar a:active {
    background-color: rgb(121, 130, 255);
}

方法二：文本对齐法

利用text-align: center属性，父容器的该属性会作用于内部的inline/inline-block元素，实现水平居中：

.navbar {
  text-align: center;
}

.navbar a:link, .navbar a:visited {
    background-color: goldenrod;
    color: black;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: larger;
}

.navbar a:hover, .navbar a:active {
    background-color: rgb(121, 130, 255);
}