时间戳

首页 > 解决方案 > 无法使用 flexbox align-items 和 justify-content 使按钮居中

html - 无法使用 flexbox align-items 和 justify-content 使按钮居中

问题描述

我正在尝试使用 flexbox 将导航栏与 4 个按钮对齐，但我无法使用 justify-content 和 align-items 都设置为中心让它们对齐到中心，感觉好像我错过了一些东西但无法弄清楚什么。

我尝试将每个按钮包装在 a 但无济于事。

HTML：

<!DOCTYPE html>
<html>
<body>
<nav id='nav'>
<span class='button'><button type='button'>Button1</button></span>
<span class='button'><button type='button'>button 2</button></span>
<span class='button'><button type='button'>Button 3</button></span>
<span class='button'><button type='button'>button 4</button></span>
</nav>
</body>
</html>

CSS：

nav {
display: flex;
}

.button {
justify-content: center;
align-items: center;
}

标签： htmlcss

解决方案

将弹性选项放在弹性容器上

nav {
  display: flex;
  justify-content: center;
  align-items: center;
}
<body>
  <nav id='nav'>
    <span class='button'><button type='button'>Button1</button></span>
    <span class='button'><button type='button'>button 2</button></span>
    <span class='button'><button type='button'>Button 3</button></span>
    <span class='button'><button type='button'>button 4</button></span>
  </nav>
</body>

推荐阅读