gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 22:13:38 24 4
gpt4 key购买 nike

我正在尝试使用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com