No me funciona el text-align: start en mi codigo. No se mueve el titulo. Les dejo mi codigo para ver si encuentran algo que yo no veo: . ...

Jose Alejandro Fuentes

Pregunta

student•hace 3 años

No me funciona el text-align: start en mi codigo. No se mueve el titulo.

Les dejo mi codigo para ver si encuentran algo que yo no veo:

HTML:

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    <title>Login</title>
</head>
<body>
    <div class="login">
        <div class="form-container">
            
            <h1 class="title"> Create Account</h1>

            <form action="/" class="form">
                <label for="name" class="label">Name</label>
                <input type="text" id="name" placeholder="Your name" class="input input-name">

                <label for="email" class="label">Email Address</label>
                <input type="email" id="password" placeholder="youremail@gmail.com" class="input input-email">

                <label for="password" class="label">Password</label>
                <input type="password" id="password" placeholder="*********" class="input input-password">

                <input type="submit" value="Create" class="primary-button create-button">
            </form>
        </div>
    </div>
</body>
</html>

CSS:

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    <title>Login</title>
</head>
<body>
    <div class="login">
        <div class="form-container">
            
            <h1 class="title"> Create Account</h1>

            <form action="/" class="form">
                <label for="name" class="label">Name</label>
                <input type="text" id="name" placeholder="Your name" class="input input-name">

                <label for="email" class="label">Email Address</label>
                <input type="email" id="password" placeholder="youremail@gmail.com" class="input input-email">

                <label for="password" class="label">Password</label>
                <input type="password" id="password" placeholder="*********" class="input input-password">

                <input type="submit" value="Create" class="primary-button create-button">
            </form>
        </div>
    </div>
</body>
</html>

Julian Alberto Martínez Agudelo

student•hace 3 años

Hola, tuve el mismo inconveniente. Solo me fue posible alinear el titulo a la izquierda cambiando el display a Flex. Pero sigo con la inquietud de porque no me funcionó en Grid.

Les comparto mi codigo.

![](

Buen día amigos.
Quisiera saber porque en mi código no logro que mi titulo se alinee a la izquierda. Dejo a continuación mi código y como lo visualiza el navegador.

<!DOCTYh1E html>
<html lang="en">
<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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
    
    <title>Crea Contraseña</title>
    <style>
         :root{
            --white: #ffffff;
            --black: #000000;
            --very-light-pink: #c7c7c7;
            --text-imput-field: #f7f7f7;
            --hospital-green: #ACD982;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }

        body{
            font-family: 'Quicksand', sans-serif;
            margin: 0;
        }
        .login{
            height: 100vh;
            width: 100%;
            display: grid;
            place-items: center;
                        
        }

        .form-container{
            display: grid;
            grid-template-rows: auto 1fr auto;
            width: 300px;
            justify-items: center;
        }
        
        .title{
            font-size: var(--md);
            color: var(--black);
            text-align: start;
            font-weight: bold;
            margin-bottom: 32px;
            
        }

        .form{
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .label{
            font-size: var(--sm);
            font-weight: bold;
            margin-bottom: 4px;
        }

        .input{
            background-color: var(--text-imput-field);
            border: none;
            border-radius: 8px;
            height: 32px;
            font-size: var(--md);
            padding: 8px;
            margin-bottom: 24px;

        }

        .primary-button{
            background-color: var(--hospital-green);
            border-radius: 12px;
            border: none;
            font-size: var(--md);
            color: var(--white);
            width: 100%;
            font-weight: bold;
            height: 60px;
            cursor: pointer;
        }

        .save-button{
            margin-top: 16px;
            margin-bottom: 32px;
        }

         @media (max-width: 640px) {
            .save-button{
                position: absolute;
                bottom: 0;
                width: 300px;    
            }
        }     
        


    </style>
</head>
<body>
    <div class="login">
        <div class="form-container">
            <h1 class="title">My Account</h2>
            <form action="" class="form">
                <label for="name" class="label">Name</label>
                <input type="text" id="Name" placeholder="Julian" class="input input-name">

                <label for="email" class="label">Email address</label>
                <input type="text" id="email" placeholder="julianb.e8806@gmail.com" class="input input-email">

                <label for="password" class="label">Password</label>
                <input type="password" id="password" placeholder="*********" class="input input-password">
                               
            </form>
            <button class="primary-button save-button">Save</button>
  
        </div>

    </div>
</body>
</html>

Estefany Aguilar

teacher•hace 3 años

Hola, Jose ! Creo que copiaste el mismo HTML en la parte de CSS 🥺

No me funciona el text-align: start en mi codigo. No se mueve el titulo. Les dejo mi codigo para ver si encuentran algo que yo no veo: . ...

Curso Práctico de Frontend Developer

Curso Práctico de Frontend Developer