none
CSS-GRID No funciona align-items RRS feed

  • Pregunta

  • Como les va ?
    En este codigo no me sale e align-items: center; ni justify-items: center; en class=simboloreloj que prentende que el color blanco de fondo solo este en centro del cuadro el texto que dice 15 encerrado en circulo aparezca en medio del div a la izquierda del formulario de entrada pero solo aparece arriba a la izquierda de ese div ,
    Aqui el codigo HTML de Login1.html (la parte donde falla es class ?simboloreloj), gracias por la ayuda que me den , muetra la imagen de como sale
    El resultado que quiereo es que ese 15 aparezca con ese fondo blanco SOLO PARA EL TEXTO, en medio o sea donde esta la X celeste en la segunda imagen, gracias de antemano por la ayuda

    <!DOCTYPE html>
    
    <html>
    
     
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>Login</title>
    
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    
        <link rel="stylesheet" href="estilos1.css">
    
     
    
    </head>
    
     
    
     
    
    <body>
    
        <div class="container">
    
            <header class="header">
    
                <img src="assets/images/Logo Kimer_239x135.png" class="imagenLogo" />
    
            </header>
    
            <div class="tituloPagina">
    
                <span class="textoTituloPagina">
    
                    <p>  PLATAFORMA DE PAGOS ONLINE</p>
    
                </span>
    
            </div>
    
            <div class="main">
    
                <form class="frmLogin">
    
                    <p class="tituloFrmLogin">Ingrese número de DNI y contraseña</p>
    
                   <div class="contenidoFormulario">
    
                        <div class="input-group">
    
                            <span class="input-group-addon"><img src="assets/images/Icono_Usuario.png"
    
                                    class="iconoVentana" /></span>
    
                            <input id="msg" type="text" class="form-control" name="msg" placeholder="Número de DNI">
    
                        </div>
    
                        <br />
    
                        <div class="input-group">
    
                            <span class="input-group-addon"><img src="assets/images/Icono_Usuario.png"
    
                                    class="iconoVentana" /></span>
    
                            <input id="password" type="password" class="form-control" name="password"
    
                                placeholder="Contraseña">
    
                        </div>
    
                        <p class="textoOlvidoContraseña form-text">¿Olvidaste tu contraseña?</p>
    
                        <div class="input-group">
    
                            <span class="input-group-addon iconoVentana"></span>
    
                            <button type="submit" class="btn btn-primary form-control btnIngreso">INGRESAR</button>
    
                        </div>
    
     
    
                        <br />
    
     
    
                    </div>
    
     
    
                    <p class="textoEsperaDeposito form-text">Tiempos estimados de espera: BCP, Interbank y BBVA: 20 minutos
    
                        | Interbancario: 48 horas del dia útil</p>
    
                </form>
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div >
    
     
    
            </div>
    
            <div class="simboloreloj">
    
                <img src="assets/images/Icono_Reloj.png" class="imagensimbolo" />
    
            </div>
    
            <footer class="footer">
    
     
    
            </footer>
    
        </div>
    
     
    
        <script src="assets/js/jquery.min.js"></script>
    
        <script src="assets/js/popper.js"></script>
    
        <script src="bootstrap/js/bootstrap.min.js"></script>
    
    </body>
    
     
    
    </html>


    aqui la parte del codigo de estilo1.css

    @font-face {
    
        font-family: "Open Sans";
    
        src: url("assets/fonts/OpenSans-Bold.ttf") format("ttf"),
    
        url("assets/fonts/OpenSans-BoldItalic.ttf") format("ttf"),
    
        url("assets/fonts/OpenSans-ExtraBold.ttf") format("ttf"),
    
        url("assets/fonts/OpenSans-ExtraBoldItalic.ttf") format("ttf");
    
      }
    
     
    
    @font-face {
    
        font-family: "Dosis";
    
        src: url("assets/fonts/Dosis-Bold.otf") format("otf"),
    
        url("assets/fonts/Dosis-ExtraBold.otf") format("otf"),
    
        url("assets/fonts/Dosis-ExtraLight.otf") format("otf"),
    
        url("assets/fonts/Dosis-Regular.otf") format("otf");
    
      }
    
     
    
     
    
     
    
    body{
    
        background-image: url('assets/images/background.jpg');
    
        font-family: Open Sans;
    
    }
    
    .container{
    
     
    
        display: grid;
    
        /* grid-template-columns: 15% 2% 66% 2% 15%; */
    
        grid-template-columns: 19% 1% 59% 1% 20%;
    
        grid-template-rows: 15% auto 7% 400px 15% auto;
    
    }
    
     
    
    .imagenLogo {
    
        width: 140px;
    
        height: 80px;
    
    /*    float: right;*/
    
        clear: right;
    
        margin-top: 12px;
    
     
    
    }
    
     
    
    header, footer{
    
        grid-column-start: 1;
    
        grid-column-end: 2;
    
    }
    
     
    
    header{
    
        grid-row-start: 2;
    
        grid-row-start: 2;
    
    }
    
     
    
    .tituloPagina{
    
        grid-column: 3;
    
        grid-row: 2;
    
     
    
        display: grid;
    
        grid-template-columns: auto;
    
        grid-template-rows: 10px auto 80px;
    
    }
    
     
    
    .textoTituloPagina{
    
        grid-column: 1;
    
        grid-row: 2;
    
     
    
        color: white;
    
        float: none;
    
        text-align: left;
    
        font-weight: bold;
    
        font-size: xx-large;
    
        font-stretch: extra-expanded;
    
        vertical-align: middle;
    
    }
    
     
    
    .main{
    
        grid-column: 3;
    
        grid-row: 4;
    
    }
    
     
    
     
    
    /* FORMULARIO */
    
    .frmLogin{
    
        display: grid;
    
        grid-template-columns: 5% 25% 40% 25% 5%;
    
        grid-template-rows: 7% 15% 5% 53% 10% 10%;
    
        border-radius: 1%;
    
        background-color: white;
    
        /*height: 350px;*/
    
        width: 550px;
    
    }
    
     
    
    .tituloFrmLogin{
    
        grid-row: 2;
    
        grid-column-start: 1;
    
        grid-column-end: 6;
    
        color : #3B7DB9;
    
        text-align: center;
    
        font-weight: bold;
    
        font-size: x-large;
    
        font-stretch: ultra-expanded;
    
    }
    
     
    
     
    
    .iconoVentana{
    
        width: 32px;
    
        height: 32px;
    
        margin-right: 5px;
    
        margin-top: 2px;
    
    }
    
     
    
    .contenidoFormulario {
    
        grid-row: 4;
    
        grid-column: 3;
    
    }
    
     
    
    .textoOlvidoContraseña {
    
        text-align: center;
    
    }
    
     
    
    .btnIngreso {
    
        background-color: #3B7DB9;
    
        border-color:  #3B7DB9;
    
        border-radius: 1%;
    
    }
    
     
    
    .textoEsperaDeposito{
    
        grid-row: 6;
    
        grid-column-start: 1;
    
        grid-column-end: 6;
    
        font-size: 12px;
    
        text-align: center;
    
    }
    
     
    
    .imagensimbolo{
    
        width: 40px;
    
        height: 40px;
    
     
    
    }
    
     
    
    /* .container > div {
    
     background-color: white;
    
     align-items: start;
    
    } */
    
     
    
     
    
     
    
     
    
    .simboloreloj{
    
     
    
        justify-items: center;
    
        align-items: center;
    
        justify-items: center;
    
        background-color: white;
    
    }
    
    
    
    
    
    
    primera imagen

    Segunda imagen debajo

    domingo, 25 de octubre de 2020 8:48

Todas las respuestas

  • acabo de encontrar la solucion

    en vez de usar align-items pongo , align-self

    align-items es para todos los divs

    align-self es para un div especifico

    Gracias de todas maneras


    martes, 27 de octubre de 2020 2:46