顯示“vs”應位于的中心線的圖像我會盡力盡可能清楚地解釋我的問題。在這里，我試圖使“vs”位于中心線，左右元素在其旁邊流動。我嘗試使用彈性盒，但它集中了整個事情，正如您在上面的照片中看到的那樣，但不是我想要實現的目標。謝謝！這是我嘗試過的一個片段：<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; }}
2 回答
qq_遁去的一_1
TA貢獻1725條經驗 獲得超8個贊
flex-basis:0為了確保元素真正共享可用空間，而不是先計算每個彈性項目的內容，然后分配剩余空間。
剩下的只是簡單的對齊。
flex: 1 0 0;是縮寫
flex-grow:1; // make element grow
flex-shrink:0; // prevent element from shrinking (preference really)
flex-basis:0; // ignore content width
/* Just for illustrating, To be removed */
body * {
border: 1px solid;
padding: 10px;
}
[center] {
display: flex;
flex-direction: column;
align-items: center;
margin: 1.5rem;
}
/* ============ */
.flex {
display: flex;
}
.page-container {
margin: 1.5rem;
max-height: 9rem;
overflow: hidden;
align-items: center;
}
.team-name {
flex: 1 0 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;
}
True center example
<div center="">
<div>VS</div>
</div>
<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>
HUH函數
TA貢獻1836條經驗 獲得超4個贊
嘗試
.page-container {
justify-content: space-between;
}
或者
.page-container {
justify-content: space-evenly;
}
如果您不希望團隊名稱與邊緣對齊
- 2 回答
- 0 關注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消