Skip to main content
3 de 4
se añadieron 139 caracteres en el cuerpo

Como posicionar divs en ciertas posiciones de otro div?

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