CSS - Centrar Horizontalmente

 
Vista:
sin imagen de perfil
Val: 5
Ha disminuido su posición en 17 puestos en CSS (en relación al último mes)
Gráfica de CSS

Centrar Horizontalmente

Publicado por Marcos (2 intervenciones) el 23/04/2021 07:37:49
Buenas, estoy haciendo una maquetación de un Login y tuve problemas al intentar centrar 2 elementos
quiero que quede la imagen arriba y el resto abajo, pero centrados verticalmente. Les adjunto el código:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="es">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="css/style.css">
</head>
 
 
<body>
 
    <div id="img">
        <img src="imgs/user.png" alt="imagen de usuario">
    </div>
 
    <form action="index.html">
        <br>
        <input type="text" name="user" placeholder="Username">
        <br>
        <input type="password" name="pass" placeholder="Password">
        <br>
        <input type="submit" value="LOGIN">
 
        <p>Forgot Password?
            <a href="">Click Here</a>
        </p>
    </form>
 
 
</body>
 
</html>

CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
* {
    box-sizing: border-box;
    background-color: #30b58a;
}
 
html {
    height: 100%;
}
 
body {
    font-family: sans-serif;
    height: 100%;
    align-items: center;
}
 
form {
    background-color: white;
    width: 357px;
    padding: 24px;
    text-align: center;
    margin: 0px auto;
}
 
input[type="text"],
input[type="password"] {
    background-color: #ededed;
    border-width: 0px;
    padding: 10px;
    width: 100%;
    height: 40px;
    display: block;
}
 
input[type="submit"] {
    width: 100%;
    height: 40px;
    background-color: #fedd12;
    border-width: 0px;
    cursor: pointer
}
 
#img {
    width: 357px;
    background-color: #30b58a;
    text-align: center;
    margin: auto;
}
 
p,
a {
    text-align: center;
    background-color: white;
    padding-top: 20px;
    font-size: 12px;
    color: gray;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
1
Responder
Imágen de perfil de Israel
Val: 67
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Centrar Horizontalmente

Publicado por Israel (28 intervenciones) el 23/04/2021 21:55:10
Hola Marcos,

Siento no poder ayudarte con la respuesta pero comentarte que aunque en el mensaje aclaras que buscas un centrado vertical en el titulo hablas de un centrado horizontal.

Por otro lado, que quieres centrar verticalmente en la ventana del Navegador? Solo el formulario o imagen y formulario.

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Centrar Horizontalmente

Publicado por Marcos (2 intervenciones) el 23/04/2021 21:58:47
Mi error, era centrado vertical, lo que buscaba era centrar la imagen y el formulario de tal manera que la imagen quede arriba del formulario, pero a la vez estén centrados verticalmente
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar