0

Tengo un duv centrado en la pantalla y un nav en el medio y top, me gustaría añadir otras filas con sus columnas pero no en la posicion de debajo de estos, sino en ciertas posiciones de este div centrado, no logró hacerlo con la doc "row align-items-center"

html {
  height:100%;
}

body {
  margin:0;
}
.tarjeta {
  min-height: 700px;
  max-width: 700px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="m-0 vh-100 row justify-content-center align-items-center text-center  ">
        <div class="tarjeta col-sm-8  shadow-lg   bg-info  bg-opacity-75 rounded-4 border border-4 border-warning ">

            <nav class="navbar navbar-expand-md bg-transparent  col-12  ">
                <div class="container-fluid  ">


                    <button class="navbar-toggler border border-warning" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon "></span>
                    </button>
                    <div class="collapse navbar-collapse  " id="navbarText">
                        <ul
                            class="bg-info shadow bg-gradientmt-2  col-12  justify-content-center align-items-center text-center  navbar-nav mb-lg-0  rounded-4 border border-2  border-dark ">
                            <li class="nav-item  ">
                                <a class="nav-link active text-white" aria-current="page" href="#">Inicio</a>
                            </li>
                            <li class="nav-item  ">
                                <a class="nav-link text-white" href="#">Skills</a>
                            </li>
                            <li class="nav-item  ">
                                <a class="nav-link text-white" href="#">Portafolio</a>
                            </li>
                            <li class="nav-item  ">
                                <a class="nav-link text-white" href="#">Redes</a>
                            </li>
                            <li class="nav-item  ">
                                <a class="nav-link text-white" href="#">Contacto</a>
                            </li>
                        </ul>

                    </div>
                </div>
            </nav>
            
                <div class=" row align-items-center bg-danger">
                    <div class="col-sm-4  ">
                        asd
                    </div>
                </div>
           

        </div>
    </div>

me gustaría poner la segunda fila por ejemplo a la mitad de la clase tarjeta, con dos columnas una a la izquierda y otra a la derecha, como float

con css solo se que se puede con

position:absolute;
  top: 50%;

También he probrado estas clases position-absolute bottom-0 end-0 pero no quiero justo en esas posiciones que muestra la documentacion

1 respuesta 1

0

Te recomiendo que lo resuelvas con bootstrap ,sobre todo si estas usando tarjetas https://getbootstrap.com/docs/4.0/components/card/

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.