[英]Center div vertically using bootstrap
I'm using bootstrap 4, i want to center the div with id of table
vertically in the center of the view screen , i try to use ```align-items-center on it's parent element but that does not work. 我正在使用bootstrap 4,我想将div与
table
id垂直居中在视图屏幕的中心,我尝试在其父元素上使用```align-items-center,但这不起作用。
here is my HTML : 这是我的HTML:
<div id="gameTable" class="d-flex h-100">
<div class="container align-items-center text-center h-100">
<table class="table text-center" id="table">
<tbody>
<tr>
<td class="align-middle">1</td>
<td class="align-middle">2</td>
<td class="align-middle">3</td>
</tr>
<tr>
<td class="align-middle">4</td>
<td class="align-middle">5</td>
<td class="align-middle">6</td>
</tr>
<tr>
<td class="align-middle">7</td>
<td class="align-middle">8</td>
<td class="align-middle">9</td>
</tr>
</tbody>
</table>
<button class="btn btn-danger" id="quit">Quit Game</button>
</div>
</div>
and here is my css : 这是我的CSS:
html, body {
height: 100%;
}
#table {
height: 70%;
}
#gameTable {
height: 100%;
display: none;
}
can anyone tell me what is wrong with my codes. 谁能告诉我我的密码有什么问题。
align-items-center
should be used with the flexbox container ( d-flex
). align-items-center
应该与flexbox容器( d-flex
)一起使用。 You can also somplify your code like below: 您还可以像下面这样放大代码:
#table { height:70%; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"> <div id="gameTable" class="d-flex align-items-center vh-100"> <div class="container text-center" id="table"> <table class="table text-center h-100"> <tbody> <tr> <td class="align-middle">1</td> <td class="align-middle">2</td> <td class="align-middle">3</td> </tr> <tr> <td class="align-middle">4</td> <td class="align-middle">5</td> <td class="align-middle">6</td> </tr> <tr> <td class="align-middle">7</td> <td class="align-middle">8</td> <td class="align-middle">9</td> </tr> </tbody> </table> <button class="btn btn-danger" id="quit">Quit Game</button> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.