I'm in the process of designing a basic login page using HTML/CSS. To center the box on the screen, I opted for a flexbox layout. So far, I have successfully positioned the Username/password fields and login button just the way I want them. The only thing left to do is add a title to the page. However, whenever I try to introduce a div element to contain the title within the flexbox container, it disrupts the positioning of the other elements.
Below is the HTML code for the login page with the title div that I wish to include commented out to demonstrate the current functionality:
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
min-height: 100%;
width: 100%;
}
#container {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
height: 700px;
}
#loginBox {
height: 400px;
width: 400px;
background-color: white;
box-shadow: rgba(0, 0, 0, .4) 0px 3px 8px;
}
#usernameBox {
background-color: white;
position: relative;
top: 35%;
left: 10%;
width: 80%;
height: 10%;
font-size: large;
border: 1px groove black;
border-radius: 5px;
text-indent: 10px;
}
#passwordBox {
background-color: white;
position: relative;
top: 44%;
left: 10%;
width: 80%;
height: 10%;
width: 80%;
font-size: large;
border: 1px groove black;
border-radius: 5px;
text-indent: 10px;
}
#loginButton {
position: relative;
left: 58%;
top: 53%;
text-align: center;
width: 130px;
height: 40px;
border-radius: 8px;
background-color: rgba(0, 102, 72, 1);
color: white;
border: .5px solid black;
font-size: small;
}<div id="container">
<div id="loginBox">
<!-- <div id="title">Log in</div> -->
<input id="usernameBox" placeholder="Username"></input>
<input id="passwordBox" placeholder="Password"></input>
<button id="loginButton" type="submit">Log in</button>
</div>
</div>The image below depicts the appearance prior to the addition of the title div:
https://i.sstatic.net/r0Uxw.png
Upon uncommenting the html code containing the title:
https://i.sstatic.net/CQf69.png
My question now arises as to how could I integrate the title into the "loginBox" while preserving the existing formatting of the Username, password fields, and the login button?