Image showing the center line where the "vs" should be on
我将尽我所能解释我的问题。在这里,我试图使中心线中的“ vs”和左右元素在其旁边流动。
我曾尝试使用flex-box,但如上图所示,它使整个内容居中,但不是我想要达到的目的。
谢谢!
这里是我尝试过的代码片段:
<div class='flex page-container'>
<div class='flex team-name'>
THIS TEAM NAME IS LONG
<img class='team-logo' src={TEAM_1_LOGO} />
</div>
<div class='vs'>VS</div>
<div class='flex team-name'>
<img class='team-logo' src={TEAM_2_LOGO} />
SHORT NAME
</div>
</div>
.flex {
display: flex;
}
.page-container {
align-items: center;
justify-content: center;
margin: 1.5rem;
max-height: 9rem;
overflow: hidden;
.team-name {
align-items: center;
}
.team-logo {
height: 6rem;
max-width: 7rem;
margin: 0 5rem;
overflow: hidden;
}
.vs {
align-self: center;
}
}
尝试
.page-container {
justify-content: space-between;
}
或
.page-container {
justify-content: space-evenly;
}
如果您不希望团队名称与边缘对齐
[flex-basis:0
以确保元素真正共享可用空间,而不是先计算每个弹性项目的内容,然后分配剩余的空间。
其余只是简单的对齐。
/* Just for illustrating, To be removed */
body * {
border: 1px solid;
padding: 10px;
}
/* ============ */
.flex {
display: flex;
}
.page-container {
margin: 1.5rem;
max-height: 9rem;
overflow: hidden;
align-items: center;
}
.team-name {
flex: 1 1 0;
align-items: center;
justify-content: flex-end;
}
.team-logo {
max-height: 6rem;
max-width: 7rem;
overflow: hidden;
margin: 0 10px;
}
.vs {
margin: 0 10px;
}
.team-name~.team-name {
justify-content: flex-start;
}
<div class="flex page-container">
<div class="flex team-name">
THIS TEAM NAME IS LONG
<img class="team-logo" src="https://i.picsum.photos/id/163/200/300.jpg">
</div>
<div class="vs">VS</div>
<div class="flex team-name">
<img class="team-logo" src="https://i.picsum.photos/id/163/200/300.jpg"> SHORT NAME
</div>
</div>
如果仅将其居中
p>(无空格)我忘了这些评论,使用html