I have organized a responsive form of div with a central and bottom alignment. The code I have included is as follows:
<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%;
}
The two div elements are not aligning correctly as expected. Instead, they appear side by side as shown in this image. In the image, the red section represents the first image, the purple section represents the second image, and the white areas with the others are where the two div should be stacked on top of each other.
I am puzzled by why one image is not positioning itself below the other.