I'm doing a cv online and I can't center the main block via CSS, so I'm trying to find a solution with JavaScript. What seemed easy to me a priori turns out to be not so easy. If anyone can tell me where I am wrong I would be very grateful.
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>
The CSS does not let me publish it because it contains too much code, but it does say that it includes a:
*{margin:0px;}
Attached link to the CSS code: GitHub
This aligns your div to center:
Explanation: margin: 0 auto; align your element to the center regardless of the *{margin:0px} and width 1024px to be the size of the div
if you want to align everything, both vertically and horizontally to the center, do the following:
display: flex; justify-content: center; align the div to the center horizontally, align-items: center; align your div to center vertically.
You can achieve it in the following way:
Proposal
What I understand is that you want to center the element horizontally independent of the client's screen resolution, so for this, you have to take the width of its screen and see if it's bigger than your container in your case 1024 if it is, subtract it at this width your width of 1024, that will give you the excess space, and you divide it by 2 to make it a margin on the left and on the right.
On the other hand, what happens if the client has a smaller screen (Resolution) than your 1024? For this I force the width of the body to be 1024 + x so that later that x/2 are your margins
It's entirely possible with css and javascript, I'll start with CSS.
You need to make the position
<body>
Relative and the position<div id="bloqueCentral">
AbsoluteAnd so it is centered with CSS without using flex, of course flex could be used but this is my favorite way. Now to center it in javascript, you have several options, one of them would be to add the styles with
document.getElementById('bloqueCentral').style.transform = "translate(-50%,-50%)";
And so for each part of the above, the other easier would be to do everything inside a canvas that occupiesheight:100vh
(height of 100% of the browser window ) andwidth:100vw
(width of 100% of the browser window) from there we would make javascript use the property the innerHTML to add all the content in the canvas and you would indicate the position from the top left where the XY coordinates are equal to 0 you would put 50% to each of the size of the canvas.That would be much more complicated so I don't recommend it especially because internet explorer has problems with some canvas properties in javascript but here I leave this link:
https://www.w3schools.com/tags/canvas_textalign.asp
| Text talk but it's the same conceptPS: Yes it could be done without the canvas but then the entire page would disappear depending on when the Javascript code loaded and added the middle part.