How do I center a div vertically between two others on a responsive website, without pushing the lower div down? I also want the div to be placed at the left side.
Here you can see, that I have centered a div between the bottom edge of the navbar and the bottom edge of the screen:
The div I want to center between the navigation bar and the above div is visible on the top left corner.
I have played around a little with Flexbox, but haven’t managed to get the wanted result:
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top">
</nav>
<!-- Not important here -->
</header>
<body>
<!-- This is the div that I want to center verically between the navigation bar and the div bellow-->
**<div class="flex-wrap">**
** <div class="flex-centered">**
** <h1 id="headLine">Let us exam your Git repositories</h1>**
** </div>**
**</div>**
<div id="gitForm">
<div class="Aligner">
<div class="container h-100 d-flex justify-content-center">
<div class="col-md-6">
<div class=card>
<div class="card-block">
<form>
<div class="form-group">
<label id="nameLabel" for="projectNameInput">Name your
project</label>
<input type="text" class="form-control" id="projectNameInput"
placeholder="A project name you can live with">
</div>
<div class="form-group">
<label id="gitLabel" for="repoInput">Enter your Git
repository</label>
<input type="text" class="form-control" id=repoInput
placeholder="A valid Gitrepo...">
</div>
<button class="btn btn-outline-success" id="submitRepo"
onclick="storeRepo()"
type="submit">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
And the CSS:
.navbar {
margin-bottom: 0 !important;
border-radius: 0 !important;
border: 0;
background: rgba(0, 0, 0, 0.5);
font-family: "Abril Fatface";
font-size: 20px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
/* I am trying to center a div between the navigation bar and div "gitForm, with .flexwrap and .flex-centered*/
.flex-wrap {
width: 400px;
height: 400px;
display: flex;
justify-content: flex-end;
flex-direction: column;
position: relative;
align-items: center;
}
.flex-centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* #headLine is the id of the text that is placed inside the div that I am trying to center.*/
#headLine {
font-family: "Abril Fatface";
background-color: rgba(0, 0, 0, 0.8);
display: inline-block;
padding: 1%;
color: #ffffff;
border-radius: 25px;
}
#nameLabel, #gitLabel {
color: #ffffff;
}
/* I am using aligner to center the div in the middle of the screen.*/
.Aligner {
display: flex;
align-items: center;
min-height: 90vh;
justify-content: center;
}
.Aligner-item {
flex: 1;
}
.card {
background: rgba(0, 0, 0, 0.8);
border-radius: 25px;
}