0

Me encuentro haciendo una cv online y no consigo centrar el bloque principal vía CSS, así que estoy intentando buscarle solución con JavaScript. Lo que a priori me parecía fácil resulta que no debe serlo tanto. Si alguien me puede comentar en que fallo estaría muy agradecido.

init();

var width;

function init(){
    posicionCentral();
}

function getWidth() {
    return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
    );
}

function posicionCentral(){
    width = getWidth();
    var posicion = (width/2) - 512;
    document.getElementById('#bloqueCentral').style.left=posicion;
}
<body>
        <div id="bloqueCentral">
            <div id="cabecera">
                <img src="imagenes/no_avatar.jpg" alt="foto" id="avatar">
            </div>
            <div id="bloqueIzquierdo">
            </div>
            <div id="bloqueDerecho">
            </div> 
        </div>
</body>

El CSS no me deja publicarlo por contener demasiado código, pero si decir que incluye un:

*{margin:0px;}

Adjunto enlace al código CSS: GitHub

5
  • Agrega por favor tu HTML y señala que elemento tratas de acomodar, tal vez si lo logremos con css
    – user128299
    el 25 abr. 2020 a las 20:06
  • Ahí esta. He metido lo esencial por que se ve que hay limite de código que puedo incrustar en la web. Lo primero que intente fue usar un margin-left: auto; y un margin-right: auto;, pero entiendo que entraba en conflico con el "*", aunque no tendría por que siendo el #bloquePrincipal mas especifico. Lo siguiente ha sido pasarme a js, pero como si no huebiese hecho nada. lo que quiero es un bloque principal con un hancho fijo de 1024px, pero no lo logro.
    – Eduardo
    el 25 abr. 2020 a las 20:47
  • Centrar en los 2 ejes?
    – user128299
    el 25 abr. 2020 a las 20:51
  • seria el "bloqueCentral" y seria un centrado horizontal, con un scroll vertical.
    – Eduardo
    el 25 abr. 2020 a las 20:52
  • Lo que quiero es que me quede el mismo espacio a ambos lado del div, tanto izquierda como derecha, independientemente de la pantalla. Pero manteniendo el tamaño de 1024px en el bloque.
    – Eduardo
    el 25 abr. 2020 a las 21:00

4 respuestas 4

0

Es completamente posible con css y con javascript, empezare con CSS.

Necesitas hacer la posicion de <body> Relativa y la posicion de <div id="bloqueCentral"> absoluta

body{
position: relative;
margin:0;
padding:0;
box-sizing: border-box;
}

#bloqueCentral{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}




<body>
            <div id="bloqueCentral">
                <div id="cabecera">
                    <img src="imagenes/no_avatar.jpg" alt="foto" id="avatar">
                </div>
                <div id="bloqueIzquierdo">
                </div>
                <div id="bloqueDerecho">
                </div> 
            </div>
    </body>

Y asi se centra con CSS sin usar flex, flex por supuesto se podria usar pero esta es mi forma favorita. Ahora para centrarlo on javascript, tienes varias opciones una de ellas seria anadir los estilos con document.getElementById('bloqueCentral').style.transform = "translate(-50%,-50%)"; Y asi para cada parte de lo de arriba, lo otro mas facil seria hacer todo dentro de un canvas que ocupe height:100vh(altura del 100% de la ventana del explorador) y width:100vw(anchura del 100% de la ventana del explorador) de ahi hariamos que javascript usara la propiedad the innerHTML para anadir todo el contenido en el canvas y le indicarias la posicion desde la parte superior izquierda donde la coordenada X Y son iguales a 0 le pondrias el 50% a cada una del tamano del canvas.

Eso seria mucho mas complicado asi que no te lo recommiendo sobre todo porque internet explorer tiene problemas con algunas propiedades de canvas en javascript pero aqui te dejo este link: https://www.w3schools.com/tags/canvas_textalign.asp | Habla de texto pero es el mismo concepto

PS: Si se podria hacer sin el canvas pero entonces la pagina entera desapareceria dependiendo de cuando el codigo de Javascript cargara y anadiera la parte central.

0

Esto alinea tu div al centro:

*{
    margin: 0px;
}
#bloqueCentral{
    width: 1024px;
    margin: 0 auto;
}

<div id="bloqueCentral">
    <div id="cabecera">
        <img src="imagenes/no_avatar.jpg" alt="foto" id="avatar">
    </div>
    <div id="bloqueIzquierdo">
    </div>
    <div id="bloqueDerecho">
    </div> 
</div>

Explicacion: margin: 0 auto; alinea tu elemento al centro independientemente del *{margin:0px} y width 1024px para que sea el tamaño del div

si queres alinear todo, tanto vertical como horizontalmente al centro, realiza lo siguiente:

body{
display: flex;
justify-content: center;
align-items: center;
}

display: flex; justify-content: center; alinea el div al centro horizontalmente, align-items: center; alinea tu div al centro verticalmente.

2
  • Si, en teoría el "margin: 0 auto;" me debería funcionar, pero el caso es que no es así, y no consigo descifrar por que.
    – Eduardo
    el 25 abr. 2020 a las 21:09
  • probe el codigo antes y funciono, seguramente hay algo mas en tu css que esta interfiriendo. Utiliza la herramienta para desarrolladores para ver que puede ser, puedes acceder precionando la tecla F12. el 25 abr. 2020 a las 21:12
0

Lo que entiendo es que deseas centrar el elemento horizontalmente independiente de la resolución de la pantalla del cliente, asi que para esto, debes tomar el ancho de su pantalla y mirar si es mas grande que tu contenedor en tu caso 1024 si lo es, restarle a este ancho tu ancho de 1024, eso te dara el exceso de espacio, y lo divides entre 2 para que sea una margen a la izquierda y a la derecha.

Por otro lado que pasa si el cliente tiene una pantalla mas pequeña(Resolucion) que tus 1024?, para esto obligo a que el ancho del body sea 1024 + x para que luego ese x/2 sean tus margenes

var ancho = document.body.offsetWidth;
if (ancho - 1024 > 0) {
  document.getElementById("bloqueCentral").style.margin = "0px " + (ancho - 1024) / 2 + "px";
} else {
  document.body.style.width = 1024 + 300 + "px";
  document.getElementById("bloqueCentral").style.margin = "0px " + (300 / 2) + "px";
}
#bloqueCentral {
  position: absolute;
  width: 1024px;
  background-color: #58535c;
 
}
<div id="bloqueCentral">
  <div id="cabecera">
    <img src="imagenes/no_avatar.jpg" alt="foto" id="avatar">
  </div>
  <div id="bloqueIzquierdo">
    Hola
  </div>
  <div id="bloqueDerecho">
    Adios
  </div>
</div>

0
0

Puedes lograrlo de la siguiente manera:

  • Quita el selector universal por que ese le aplicará las reglas CSS que tenga a todos los elementos que se vean afectados por el lo cual generará que el espacio que exista de la etiqueta superior con respecto del elemento a centrar se pierda
  • Aplicale una media de ancho al bloque a centrar, el alto no importa al momento en razón de que se modificará conforme tenga contenido
  • Aplica el shorthand de margin 0 auto para centrar horizontalmente

Propuesta

    <style>
    
      #bloqueCentral {
        border: 1px solid;
        height: 40px;
        margin: 0 auto;
        width: 1024px;
      }
    </style>
    
    <body>
            <div id="bloqueCentral">
                <div id="cabecera">
                    <img src="imagenes/no_avatar.jpg" alt="foto" id="avatar">
                </div>
                <div id="bloqueIzquierdo">
                </div>
                <div id="bloqueDerecho">
                </div> 
            </div>
    </body>

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.