如何修复不完全居中的Flexbox？
因此，我试图制作一种具有UI的窗格，例如着陆页。但是我有以下问题。
在这张图片中，我有完美的顶部元素，但是测试元素无法正确对齐。我该如何解决此问题？
顶级酒吧的课程是小面板 未对准的类是面板 整个面板课程都是面板
CSS：
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,100;1,400&display=swap');
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
}
main {
background: linear-gradient(to left top, rgba(87, 171, 235, 0.6), rgba(87, 171, 235, 0.9));
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.panel {
background: linear-gradient(to right bottom, rgba(255,255,255,0.8), rgba(255,255,255, 0.3));
min-height: 90vh;
width: 95%;
background: linear-gradient(to right bottom, rgba(255,255,255,0.7), rgba(255,255,255, 0.3));
border-radius: 2rem;
z-index: 2;
backdrop-filter: blur(2rem);
display: flex;
justify-content: center;
}
.panelHeader {
display: flex;
justify-content: center;
font-size: 40px;
padding-top: 20px;
animation: 0.45s ease-in 0s 1 slideInTop;
}
.panelContent {
display: flex;
justify-content: center;
align-items: center;
}
@keyframes slideInTop {
0% {
transform: translateY(-20%);
}
100% {
transform: translateY(0);
}
}
谢谢！
编辑
有人要求我的HTML，所以这里：
<!DOCTYPE html>
<html>
<head>
<title>Tyler TV: Streaming</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<section class="panel">
<div class="panelHeader">
<h1>Tyler TV. Stream Today, Watch Tommorow.</h1>
</div>
<div class="panelContent">
<h1>test</h1>
</div>
</section>
</main>
</body>
</html>
So I am attempting to make a sort of pane that has some UI, like a landing page. But I have a problem as follows.
In this picture, I have the top element which is perfect, but the test element wont center element wont align correctly. How can I fix this so its centered?
The top bar's class is panelHeader
The unaligned class is panelContent
the entire panel class is panel
CSS:
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,100;1,400&display=swap');
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
}
main {
background: linear-gradient(to left top, rgba(87, 171, 235, 0.6), rgba(87, 171, 235, 0.9));
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.panel {
background: linear-gradient(to right bottom, rgba(255,255,255,0.8), rgba(255,255,255, 0.3));
min-height: 90vh;
width: 95%;
background: linear-gradient(to right bottom, rgba(255,255,255,0.7), rgba(255,255,255, 0.3));
border-radius: 2rem;
z-index: 2;
backdrop-filter: blur(2rem);
display: flex;
justify-content: center;
}
.panelHeader {
display: flex;
justify-content: center;
font-size: 40px;
padding-top: 20px;
animation: 0.45s ease-in 0s 1 slideInTop;
}
.panelContent {
display: flex;
justify-content: center;
align-items: center;
}
@keyframes slideInTop {
0% {
transform: translateY(-20%);
}
100% {
transform: translateY(0);
}
}
Thank you!
EDIT
Someone asked for my HTML so here:
<!DOCTYPE html>
<html>
<head>
<title>Tyler TV: Streaming</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<section class="panel">
<div class="panelHeader">
<h1>Tyler TV. Stream Today, Watch Tommorow.</h1>
</div>
<div class="panelContent">
<h1>test</h1>
</div>
</section>
</main>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
默认情况下，flex框设置为
flex方向：行，您需要将主
.panel设置为列，请删除
合理 - 符合：Center来自.panel如果您不需要垂直对齐by default the flex box is set to
flex-direction: row,You need to set your main
.panelto column,Remove
justify-content: centerfrom.panelif you don't need vertical alignment您添加了带有NowRap选项包装容器的显示Flex。
您需要添加到.panel {
flex-wrap：wrap;}选项，或{flex-direction：column;}You added display flex to wrap container with nowrap options.
You need add to .panel {
flex-wrap: wrap;} option, or {flex-direction: column;}