Question

我放置一个响应形式的div，中央和底部;我插入了以下代码：

<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，它应该是一个在另一个之下。

我无法理解为什么一个人不会在另一个之下。

Answer 1

如果你想要将两个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;
}

jsfiddle example

在表格中放置两个div，一个中间和一个底部

1 个答案: