Centering the viewport on a spacious website

Question

Centering the viewport on a spacious website

Currently, I am working on developing a horizontal website that spans 16000px using a specific template that can be found at the following link: http://tympanus.net/Tutorials/WebsiteScrolling/

The website is divided into four sections, each 4000px wide. My goal is to create a centered div within the browser's viewport for each section.

Vertically, achieving 50% alignment is not an issue. However, horizontally, 50% would place the div at 2000px into the page.

Does anyone have any suggestions on how to make this work?

I have managed to center my #verycentre div on the first page using a script. However, I am struggling with centering a window div at each section anchor.

As the page scrolls across and reaches each section, I am attempting to create a resizable #verycentre div for each section.

The current code that I am using works perfectly for the first centered div in section 1. I suspect that the issue may be due to the function call being made on document.ready.

At that time, there is only one #verycentered div in the window, which I believe is causing the problem. How can I ensure that all #verycentered divs at each anchor point are centered and resizable?

Thank you for your help.

jquery css width viewport

Answer 1

Answer №1

Aligning a div to the center using CSS can be tricky when the width offsets the window area. One alternative solution is to utilize a JQuery function to help center the div based on the window position.

For more information on how to center an object based on the window area display, refer to this informative post.

Learn more about using jQuery to center a DIV on the screen

Answer 2

Aligning a div to the center using CSS can be tricky when the width offsets the window area. One alternative solution is to utilize a JQuery function to help center the div based on the window position.

For more information on how to center an object based on the window area display, refer to this informative post.

Learn more about using jQuery to center a DIV on the screen

Answer 3

Answer №2

To achieve the desired effect, apply a negative left margin along with setting the position to relative:


div{
 position: relative;
 left: 50%;
 margin-left: -2000px;
}

Answer 4

To achieve the desired effect, apply a negative left margin along with setting the position to relative:


div{
 position: relative;
 left: 50%;
 margin-left: -2000px;
}

Answer 5

Answer №3

<script type="text/javascript">
$(document).ready(function() {
function adjust_position() {
    let win_width = $(window).width();
    let win_height = $(window).height();    

    let obj_width = $('#centered-element').width();
    let obj_height = $('#centered-element').height();

    $('#centered-element').css('top', (win_height / 2) - (obj_height / 2)).css('left', (win_width / 2) - (obj_width / 2));
    }

    adjust_position();

$(window).resize(function() {
    adjust_position();
});

});
</script>

Answer 6

<script type="text/javascript">
$(document).ready(function() {
function adjust_position() {
    let win_width = $(window).width();
    let win_height = $(window).height();    

    let obj_width = $('#centered-element').width();
    let obj_height = $('#centered-element').height();

    $('#centered-element').css('top', (win_height / 2) - (obj_height / 2)).css('left', (win_width / 2) - (obj_width / 2));
    }

    adjust_position();

$(window).resize(function() {
    adjust_position();
});

});
</script>

Centering the viewport on a spacious website

Answer №1

Answer №2

Answer №3

Similar questions

Separate the information into different sets in JavaScript when there are more than two elements

Creating a dynamic webpage using Javascript that responds to user clicks on page links

css: Aligning fonts horizontally when they have varying sizes

What is the most effective way to identify mobile browsers using javascript/jquery?

Initiate and cease automatic refresh with AJAX

Generate a download link for the image being shown in a div element

A guide on rendering a JSON array received from a URL using AJAX in AngularJS

PHP seems to be resistant to receiving data from ajax requests

What is the best way to handle the return value from using indexOf on a string?

Issue with Bootstrap CSS not rendering properly in Chrome and Firefox

Enhancing JQuery Validation by incorporating a bespoke method for submission validation

presentation not transitioning smoothly as the next slide appears

Toggle class on element based on presence of class on another element

The grid expands to cover the entire width of the browser

Is it possible to combine Bootstrap 2.3.1 with newer versions such as 4.0 or 3.x.x?

Struggling to perfectly align text in the middle of a div container that also has

Using 2 viewports depending on the device

The Material UI button shifts to a different row

Add custom CSS styles to a webpage using the CSS Style element retrieved from

How to customize Material UI Autocomplete options background color