gpt4 book ai didi

html - 将多个 div 与 "align-items"对齐

转载 作者:太空宇宙 更新时间:2023-11-04 02:38:50 26 4
gpt4 key购买 nike

我一直在寻找一种方法来对齐具有给定高度和宽度的 div 中的内容,一些网站建议使用“align-items”进行 flex。当所有内容都具有相同的高度时,它会完美地工作,但它们没有。

Here是一个演示,只需将鼠标悬停在“Player 3 some more info”框上,您就会看到它被向下推了一点。

有人能告诉我如何解决这个问题,让它保持在它的行中并且仍然居中吗?

HTML:

<div id="wrapper">
<div id="column_top_left">
<div class="row small">
<div class="td"><div class="td_wrapper">Datum</div></div>
</div>
</div>
<div id="column_top_right">
<div class="row small">
<div class="td"><div class="td_wrapper">Player 1</div></div>
<div class="td"><div class="td_wrapper">Player 2</div></div>
<div class="td"><div class="td_wrapper">Player 3<br>some more info</div></div>
<div class="td"><div class="td_wrapper">Player 4</div></div>
<div class="td"><div class="td_wrapper">Player 5</div></div>
<div class="td"><div class="td_wrapper">Player 6</div></div>
</div>
<div id="column_bottom_left"></div>
<div id="column_bottom_right"></div>
</div>

还有CSS:

.row{
overflow: hidden;
white-space: nowrap;
}
.small{
height: 80px;
}
.big{
height: 200px;
}
.td_wrapper{
display: inline-flex;
justify-content: center; /* x align */
align-items: center; /* y align */
height: 100%;
width: 100%;
}
.td{
display: inline-block;
width: 200px;
height: 100%;
}

感谢您的帮助!

最佳答案

inside td 元素居中而言,您所做的一切看起来都很棒!您只需要对 td 项本身进行更多样式设置。在这种情况下,vertical-align 实际上解决了问题。

.td {
display: inline-block;
width: 200px;
height: 100%;
vertical-align: top; /* This is the only change you need! */
}

关于html - 将多个 div 与 "align-items"对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35137562/

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