html - 如何水平和垂直居中表格文本？

Question

我见过类似甚至相同的问题，但我已经尝试了解决方案，但它对我不起作用。

我正在尝试创建一个表格，理想地使用 flex 将文本垂直和水平居中，这对我来说在使用“d-flex align-items-center justify-content-center”时完全破坏了整个表格结构。它也是重要的是从左边开始的第一个 block 具有扩展的宽度!

我正在尝试实现与本网站“https://media.realestate.com.au/ad-specs/ad-unit/home-page-hero/”上的表格相似或相同的东西

这是我的代码

<div class="row my-4 bg-white">
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th><h6 class="font-weight-light">Ad unit</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">buy</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">rent</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">sold</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">news</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">guides</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">lifestyle</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">video hub</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">find agents</h6></th>
                    <th><h6 class="font-weight-light text-capitalize">new homes</h6></th>
                </tr> justifa
            </thead>
            <tbody>
                <tr>
                    <td><h6 class="font-weight-light">Home Page Hero</h6></td>
                    <td class="bg-green"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

ul a{
    color: #8ec302 !important;
    text-underline: none !important;
    text-decoration: none !important;
}
a{
    color: inherit !important;
    text-underline: none !important;
    text-decoration: none !important;
}
#navigation a:hover{
    color: #8ec302 !important;
    text-underline: none !important;
    text-decoration: none !important;
}
#navigation a{
     color: inherit !important;
     text-underline: none !important;
     text-decoration: none !important;
 }

.footer-hyperlink-hover  a:hover{
    color: #8ec302 !important;
    text-underline: none !important;
    text-decoration: none !important;
}
.image-no-resize {
    min-height: 200px;
    min-width: 350px;
}
.card-header {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.card {
    border: none !important;
}
h6{
    padding-bottom: 2px !important;
    margin-bottom: 2px !important;
}
ul h6{
    padding-bottom: 2px !important;
    margin-bottom: 2px !important;
}
span{
    font-weight: bold;
}
/*End of styling*/

/*Pictures*/
.career-picture{
    background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url("../images/career.jpg") center/cover no-repeat;
}
/*End of pictures*/

/*Spacing*/
.container-fluid-short{
    max-width: 100rem;
    width: 100%;
}
.container-fluid-shorter{
    max-width: 65rem;
}
.container-fluid-shorter-inner{
    max-width: 76rem;
}

我尝试自己在左侧设置自定义宽度，这确实有效，但在我最近对代码进行了调整后停止了。我究竟做错了什么？感谢您的任何建议!

Answer 1

您想使用 text-center align-middle .此外，将每行的第一列设置为 <th scope="row"></th>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row my-4 bg-white">
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th scope="col"><h6 class="font-weight-light">Header</h6></th>
                    <th scope="col"><h6 class="font-weight-light">Header</h6></th>
                    <th scope="col"><h6 class="font-weight-light text-capitalize">Header</h6></th>
                    <th scope="col"><h6 class="font-weight-light text-capitalize">Header</h6></th>
    
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row"><h6 class="font-weight-light">Home Page Hero</h6></th>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
                    <td>Default</td>
                    <td class="text-center align-middle">Center Everything</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>