Question

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

Here是一个演示，只需将鼠标悬停在＆＃34;播放器3更多信息＆＃34;盒子，你会发现它被推下了一点。

有人可以告诉我如何解决这个问题，以便它保持在行中并仍然居中？

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple/>
<div class="thumbnail"></div>

和css：

<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>

感谢您的帮助！

Answer 1

至于内部的 td项目，你所做的一切看起来都很棒！您只需要将td项自己设置为更多样式。在这种情况下，vertical-align实际上解决了这个问题。

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

将多个div与＆＃34; align-items＆＃34;对齐

1 个答案: