After attempting the solutions proposed in previous posts, I find myself sharing my amateur code where the embedded image refuses to center and I am at a loss as to why. The image is meant to be positioned in the middle of a login screen/box; it worked for the individual who conducted the demonstration, yet despite tweaking his CSS, I have only been able to marginally improve its placement. However, the image still remains off-center. Can anyone shed some light on this issue?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Standard Meta Tags -->
<!-- Bootstrap & Related Links-->
<link rel="stylesheet" href="static/styles.css">
<title>Project</title>
</head>
<body>
<!-- cont is the entire box; changing its CSS changes its position on the page -->
<div class="cont">
<!-- box is the area that contains the image, username, and password fields, but not the button bar and login buttons -->
<div class="box">
<!-- Creates the entire top row with close button and three circular buttons
<div class="row top">
<div class="left">
<i class="fa fa-times close"></i>
</div>
<div class="right">
<i class=" fa fa-circle but one"></i>
<i class=" fa fa-circle but two"></i>
<i class=" fa fa-circle but three"></i>
</div>
</div>
-->
<div class="row middle sg">
<div class="row pic sg">
<div class="col-md-4 col-md-offset-4">
<img src="static/fleur.jpeg" alt="fleur-de-lis" class="photo">
</div>
</div>
<form action="#" class="form-horizontal form">
<div class="input-group y">
<span class="input-group-addon"><i class="fa fa-user use"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa faunlock-alt use"></i></span>
<input type="password" class="form-control" placeholder="Password">
</div>
</form>
</div>
<div class="row base sg">
<h2 class="text-center login">Login</h2>
</div>
</div>
</div>
</body>
</html>
CSS
html, body {
width: 100%;
height: 100%;
}
.cont {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: #2B2B35;
width: 400px;
border-radius: 10px;
}
.top {
width: 100%;
background-color: #24242E;
margin: 0;
border-radius: 10px 10px 0 0;
padding: 0 15px;
}
.left {
float: left;
}
.right {
float: right;
}
.close {
padding: 18px 0;
font-size: 20px;
color: #fff;
}
.but {
padding: 18px 0 18px 5px;
font-size: 20px;
}
.but:hover {
cursor: pointer;
}
.one {
color: #F4CB61;
}
.two {
color: #DB5594;
}
.three {
color: #6451E8;
}
.photo {
width: 200px;
border-radius: 50%;
}
.sg {
display: block;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
}
.pic {
margin: 40px 0 30px 0;
}
.form {
padding: 0 40px 40px 40px;
}
.login {
padding: 12px 0;
margin: 0;
}
.base {
background-color: #3FA752;
border-radius: 0 0 10px 10px;
color: #fff;
}
.base:hover {
cursor: pointer;
}
.base h2{
font-weight: 600;
font-size: 26px;
}
.user {
color: #ccc;
}
.y {
padding-bottom: 15px;
}
input[type=text],
input[type=password] {
background: 0, 0;
border: 0;
box-shadow: none;
border-radius: 0;
border-bottom: 1px solid #9446B6;
}
.input-group-addon {
background: 0 0;
border: 0;
border-radius: 0;
border-bottom: 1px solid #9AA6B6;
}
.use {
color: #9AA6B6;
}
input[type=text],
input[type=password]:focus{
box-shadow: none !important;
color: #FF3F3F;
}