我放置了一个响应式的div，一个central和一个bottom；我插入了以下代码:
<link href="../css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/splashscreen.css" rel="stylesheet" />
<body class="container container-table">
<div class="text-center col-md-12 col-md-offset-12 vertical-center-row">
<img class="img-responsive center-block imageCenterContentFirst" src="../images/disegno11.svg" />
</div>
<div class="col-md-offset-12 vertical-bottom-row">
<img class="img-responsive center-block imageCenterContentSecond" src="../images/logo_macnil_zucchetti.svg" />
</div>
</body>
CSS:
html, body, .container-table {
height: 100%;
width: 100% !important;
padding: 0;
margin: 0;
}
.container-table {
display: table;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
width: 50%;
}
.vertical-bottom-row {
display: table-cell;
vertical-align: bottom;
}
.imageCenterContentFirst {
width: 100%;
}
这两个 div 没有按照我的意愿对齐，但它们似乎并排出现，如 this image 中所示.其中红色的是第一张图，紫色的是第二张图，而白色和另一部分是两个div，应该是一个在下。
我不明白为什么一个不在另一个下面。
最佳答案
如果您希望两个 div 显示在另一个上方，请尝试使用 display: table-row 而不是 table-cell，作为 display: table; 的直接子级。此外，您已将其中一个 div 设置为 50% 宽度。
.container-table {
display: table;
}
.vertical-center-row {
display: table-row;
vertical-align: middle;
background:red;
}
.vertical-bottom-row {
display: table-row;
vertical-align:bottom;
background:violet;
}
关于html - 在表格中放置两个div，一个中间和一个底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34814407/