如何在标签中垂直对齐项目？

Question

我有一张像这张桌子一样的桌子

我如何将所有文本位置设置为文本框的中心

这是我的代码

<table id="zero_config" class="table table-striped table-bordered dataTable"
                                       role="grid" aria-describedby="zero_config_info" style=" table-layout: fixed ;">
                                    <thead>
                                    <tr >
                                        <th rowspan="2" style="text-align: center;padding-top: 0px;">Theo ngày</th>
                                        <th rowspan="2" style="text-align: center;padding-top: 0px;">Tên đối tác</th>
                                        <th colspan="2" style="text-align: center" >Giao dịch cũ - Đã khớp</th>
                                        <th colspan="2" style="text-align: center" >Giao dịch mới đã khớp tự động</th>
                                        <th colspan="2" style="text-align: center" >Giao dịch mới- Lệnh tự động, khớp nhân công</th>
                                        <th colspan="2" style="text-align: center" >Giao dịch mới - Chưa khớp</th>
                                    </tr>
                                    <tr >
                                        <th style="text-align: center">Số lượng GD</th>
                                        <th style="text-align: center">Số gạch nợ (đã có VAT) </th>
                                        <th style="text-align: center">Số lượng GD</th>
                                        <th style="text-align: center">Số gạch nợ (đã có VAT)</th>
                                        <th class="text-center" style="text-align: center;">>Số lượng GD</th>
                                        <th style="text-align: center">Số gạch nợ (đã có VAT)</th>
                                        <th style="text-align: center">Số lượng GD </th>
                                        <th style="text-align: center">Số gạch nợ (đã có VAT)</th>

                                    </tr>

                                    </thead>
                                    <tbody>

Answer 1

我只是添加

<style type="text/css">
    table, thead, tr, th {
        display: flex-box;
        border: 1px solid black;
    }

    th {
        height: 100px;
        width: 100px;
    }
</style>

到您提供的html代码，并且所有内容都水平，垂直居中。 只要了解如何正确使用flex-box ，您就可以实现所需的布局。

Answer 2

以我的理解您的问题，您只需在表的vertical-align: middle添加vertical-align: middle 如果没有，请详细说明您的问题

 .table thead th { vertical-align: middle !important; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <table id="zero_config" class="table table-striped table-bordered dataTable" role="grid" aria-describedby="zero_config_info" style=" table-layout: fixed ;"> <thead> <tr> <th rowspan="2" style="text-align: center;padding-top: 0px;">Theo ngày</th> <th rowspan="2" style="text-align: center;padding-top: 0px;">Tên đối tác</th> <th colspan="2" style="text-align: center">Giao dịch cũ - Đã khớp</th> <th colspan="2" style="text-align: center">Giao dịch mới đã khớp tự động</th> <th colspan="2" style="text-align: center">Giao dịch mới- Lệnh tự động, khớp nhân công</th> <th colspan="2" style="text-align: center">Giao dịch mới - Chưa khớp</th> </tr> <tr> <th style="text-align: center">Số lượng GD</th> <th style="text-align: center">Số gạch nợ (đã có VAT) </th> <th style="text-align: center">Số lượng GD</th> <th style="text-align: center">Số gạch nợ (đã có VAT)</th> <th class="text-center" style="text-align: center;">>Số lượng GD</th> <th style="text-align: center">Số gạch nợ (đã có VAT)</th> <th style="text-align: center">Số lượng GD </th> <th style="text-align: center">Số gạch nợ (đã có VAT)</th> </tr> </thead> <tbody> 

Answer 3

看来您正在使用boostrap。 尝试添加到元素：

class="align-middle"和text-center

喜欢：

   <th class="align-middle text-center" rowspan="2">Theo ngày</th>