Question

我遇到问题，即align-middle类无法与bootstrap 4一起使用。如何解决此问题？这是我的代码：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
                            <div class="table table-responsive">
                                <table id="search_content" class="table table-bordered">
                                    <tbody>
                                        <tr class="d-flex">
                                            <td class="col-md-4 align-middle">Pirkimo numeris</td>
                                            <td class="col-md-8 align-middle" colspan="4"><input id="numerisId" class="form-control" name="numeris" type="text"/></td>
                                        </tr>
                                        <tr class="d-flex">
                                            <td class="col-md-4 align-middle">Pavadinimas</td>
                                            <td class="col-md-8 align-middle" colspan="4"><input id="pavadinimasId" class="form-control" name="pavadinimas" type="text" /></td>
                                        </tr>
                                        <tr class="d-flex">
                                            <td class="col-md-12 text-right">
                                                <input id="ieskoti" class="btn btn-danger" title="Ieškoti" type="Submit" value="Ieškoti" />
                                                <input id="trinti" class="btn btn-default" title="Išvalyti" type="submit" value="Išvalyti" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

非常感谢您的帮助！：）

Answer 1

class="align-middle"在Bootstrap 4中工作，并通过应用

垂直居中元素的内容

vertical-align: middle;

在元素上。

此值使s的内容沿放置在<td>高度的（垂直）中间的假想水平线对齐。参见#vertical-align。

该效果只能在其父级<td>最高的<tr>上观察到。

请注意，在许多情况下，将align-middle类放在<td>上不会产生可观察到的变化。这么多枚举它们似乎是在浪费时间。如果您尝试将<td>的内容垂直居中，而align-middle则不适合您，请使用实时代码段演示问题以更新您的问题，我将使用特定方法来更新我的答案考虑你的情况。

要将<td>的内容水平居中，请在class="text-center"上使用<td>类，

text-align: center;

请参见#text-alignment。

要在更宽的父级中对齐块级元素，请使用class="mx-auto"类，该类适用：

margin-left: auto;
margin-right: auto;

请参见#horizontal-centering。

添加摘录后进行编辑：即使您将d-flex类应用于<tr>，您的<td>仍然具有display:table-cell。如果要在它们上使用flexbox居中，请为<td> s提供以下类：

<td class="d-flex align-items-center justify-content-center">Ta daaa!</td>

...，其中.align-items-center垂直居中，.justify-content-center水平居中。

但是，在这种情况下，您正在<table>标记上使用flexbox，这几乎没有意义。考虑到您的用法，最好使用.form-group s。

居中对齐在表中不起作用

1 个答案: