我正在尝试使用 flexbox 将导航栏与 4 个按钮对齐，但我无法使用 justify-content 和 align-items 都设置为中心来让它们对齐到中心，感觉好像我遗漏了什么但不能'不知道是什么。
我试过将每个按钮都包裹起来，但无济于事。
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;
}
最佳答案
将 flex 选项放在 flex 容器上
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>关于html - 无法使用 flexbox align-items 和 justify-content 使按钮居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57980563/