Question

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

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

我正在尝试实现与本网站“ 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>

如何将表格文字水平和垂直居中？

1 个答案: