<code>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Login Page</title>
</head>
<style>
input[type=text], input[type=password], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #808080;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #A9A9A9;
}
html,body {
height:100%;
width:100%;
margin:0;
}
body {
display:flex;
background-color:#D3D3D3;
}
form {
margin:auto;
}
</style>
</code>
The above css makes the form be center aligned in Chrome and firefox but the same doesn't work in IE. In IE the form is horizontally center aligned, but vertically it's not aligned. What is wrong and what can be done to make it properly aligned in IE also? (Am new to web dev)
Aucun commentaire:
Enregistrer un commentaire