2

Como hago para mantener centrado el mapa cada vez que cambie la clase del elemento MyMap, lo cual esta especificado en los estilos css.

    $scope.eldiv = document.getElementById('MyMap'); 
    var boxOne = document.getElementsByClassName('map')[0],
        btnone = document.getElementsByClassName('absolute')[0],
        lalista = document.getElementsByClassName('lista')[0],  
        map      


      document.getElementsByClassName('absolute')[0].onclick = function () {
        if (!lalista.classList.contains('mapCambia')) {
            boxOne.classList.toggle('mapCambia');
            btnone.classList.toggle('botonlista');
            lalista.classList.toggle('listaCambia');
            });

        }
    };

    function initialize() {
        map = new google.maps.Map($scope.eldiv, mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

Estilos css

.absolute {
position: relative;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
z-index: 99;
bottom: 25px;
transition: 2s;
}

.lista {
height: 0%;
width: 100%;
z-index: 98;
transition: 2s;
}

.lista.listaCambia {
height: 100%;
width: 100%;
z-index: 98;
}
.absolute.botonlista {
position: relative;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
}
3

1 respuesta 1

1

Aquí hay varios metodos de alinear verticalmente elementos http://vanseodesign.com/css/vertical-centering/ Creo que el que mejor te convendria seria el de las tablas

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}
<div id="parent">
    <div id="child">Content here</div>
</div>

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.