Maintain the central alignment of the entire page (including the horizontal scrollbar) while zooming in

I have successfully centered elements, but now I am trying to center the entire page (i.e. have the horizontal scrollbar in the middle) when zooming in. Currently, the scrollbar stays at the very left end as I zoom in.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

#p {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.c1,
.c2,
.c3 {
  margin: 1rem;
  min-width: 15rem;
  height: 5rem;
  text-align: center;
}

.c1 {
  background-color: red;
}

.c2 {
  background-color: green;
}

.c3 {
  background-color: blue;
}
<div id="p">
  <div class="c1">
    aaa
  </div>
  <div class="c2">
    bbb
  </div>
  <div class="c3">
    ccc
  </div>
</div>

During zooming, the red div will go out of view and become unreachable at a certain level of zoom.

css

Answer №1

Incorporating this feature using CSS alone is not feasible. It may be necessary to utilize JavaScript for achieving the desired functionality.

const container = document.querySelector("#p");
const centerEl = document.querySelector(".center-element");

container.scrollLeft = centerEl.offsetLeft + centerEl.offsetWidth / 2 - container.offsetWidth / 2;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

#p {
  width: 100%;
  display: flex;
  /* removed:
    justify-content: space-around;
    align-items: center;
  */
  overflow-x: scroll;  /* added. so that it does not affect the whole page. */
}

.c1,
.c2,
.c3 {
  margin: 1rem;
  min-width: 15rem;
  height: 5rem;
  text-align: center;
}

.c1 {
  background-color: red;
}

.c2 {
  background-color: green;
}

.c3 {
  background-color: blue;
}
<div id="p">
  <div class="c1">
    aaa
  </div>
  <div class="c2 center-element">
    bbb
  </div>
  <div class="c3">
    ccc
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The width of each column in this dataset is variable and unknown

I need to organize a varying number of items into columns. The sizes of both the items and container are unknown, as well as how many columns will fit or what width they should be. I want the browser to arrange the items in as many columns as possible with ...

htmljquerycss

Issue with Angular 6 Animation not showing up

Looking to incorporate an animation spinner into my Angular app Found this spinner example: https://codepen.io/z-/pen/OPzNLz spinner.component.html import { Component, OnInit } from '@angular/core'; @Component({ selecto ...

htmlcssangularanimation

Images in gallery slider are excessively large

Hello, this is my very first post on stackoverflow. Please forgive any atypical elements in this post. I have a Django Website with a gallery slider, but I am facing an issue where the images appear way too big. You can view them here: I have dedicated n ...

pythonhtmlcssdjango

absence of a scrollbar on smaller window display

My website is experiencing an issue: everything displays properly when the window size matches or exceeds the background image, but on a smaller window, there is no scroll bar which causes the footer to disappear. Here is an image showing what happens wit ...

htmlcssbrowserwindow

Creating an undo feature for a dynamically generated checklist of checkboxes

I am using a combination of javascript/jquery and html to dynamically populate the page with checkboxes. When you click "add", a new checkbox is created. I am now looking for a way to add an undo button that would delete the last checkbox created. Here is ...

javascriptjqueryhtmlcss

What is the best way to ensure that the sidebar appears after the content on mobile devices, even when there are full-width blocks within

I attempted to enclose fixed-width content and sidebar within a common container, but when it came to mobile devices, I could only come up with a solution where the sidebar is positioned after the content and before the full-width content. However, this ar ...

htmlcssresponsive-design

Adding CSS files to a JSP page in a Struts2 application

Hello, I am currently learning Java and working on a Struts2 project. I have added a stylesheet in the following path: /WEB-INF/common/css/style.css and also included Bootstrap in this directory: /WEB-INF/common/css/bootstrap/bootstrap.min.css I ...

javacssjspstruts2

Styling in CSS to ensure scrollbar is constantly displayed without narrowing the container's width

Is it possible to have a vertically scrollable div with an always visible scrollbar without the scrollbar affecting the width of the elements inside? I attempted some CSS modifications, but the scrollbar still reduced the available width of the div. Is th ...

htmlcssstylesheet

Resizing the background while scrolling on a mobile web browser

My website background looks great on desktop, but on mobile (using Chrome) the background starts to resize when I scroll, mainly due to the browser search bar hiding and reappearing upon scroll. Is there a way to prevent my background from resizing? Check ...

javascripthtmlcss

Swapping out an image using CSS

Previously, the most common method for "removing" text from elements was through text-indent: -9999px, however, it is now recommended to use text-indent: 100%; white-space: nowrap; overflow: hidden; This way, the browser does not need to create a huge 9 ...

cssoverflowfont-sizetext-indent

Issue: Animation not triggered on exit by React-transition-group Transition

I am aiming to create a unique animation where an icon spins 90 degrees to become flat and then seamlessly transitions into another icon, simulating a coin-spin effect. The desired effect is for the icons to spin both on enter and exit, although there may ...

cssreactjsanimationreact-transition-group

Looking for a way to make one image disappear briefly while transitioning to another image in Javascript

**Hey there, coding enthusiasts! I could really use some help right now. I am trying to create a smooth image transition effect using Javascript, where one image fades out while the next one fades in seamlessly. As someone who is still relatively new to pr ...

javascripthtmlcss

Tips for incorporating a smooth fade in and out effect into images within a Bootstrap 5 carousel

I'm currently working with a Bootstrap 5 carousel and trying to implement a transition effect where clicking the "next" arrow will smoothly fade out the current image before fading in the next one. This is necessary because the images in my carousel v ...

javascripthtmlcsscss-transitionsbootstrap-5

Spin only the outline with CSS

I have a unique idea for my webpage - three spinning circles surrounding text, while the text itself remains stationary. My challenge is to achieve this effect using only CSS, specifically by utilizing the .spinner-border class from Bootstrap. I cannot ma ...

htmlcssborderspinner

What could be causing my transform scale to not function properly in Bootstrap?

As a complete beginner, I am currently in the process of learning bootstrap. I have noticed that the animation breaks when I apply it, specifically the scaling part. Interestingly, the animation works perfectly fine without Bootstrap. I am wondering if the ...

htmlcssbootstrap-5

Customizing the active state of a Dropdown Item in Bootstrap version 4.5

Recently, I've embarked on the journey of creating my own theme using a combination of SASS and Bootstrap. However, I've hit a little snag when it comes to achieving the desired active appearance for a dropdown item within a navbar. To be complet ...

cssbootstrap-4sasskoala

The -webkit-linear-gradient effect can lead to noticeable banding issues on Chrome and Safari browsers

The title pretty much sums it up. The first image below is a screenshot of a page that is about 8000 pixels tall, taken in the most recent version of Chrome: On the other hand, this image depicts a different page (with the same CSS), which is only about 8 ...

google-chromecss

Creating a customized design for a React application with the use of Scss and JavaScript variables

Is there a method to incorporate JavaScript variables into an SCSS file? For instance, I have a JavaScript file containing the following code: // sky blue const PRIMARY_COLOR = '#489FEF' export { PRIMARY_COLOR} and I would like to utilize it ...

javascripthtmlcssreactjssass

Incorporate a class into a link within the wp_list_pages function

I've been experimenting with creating a hover effect on list items using the wp_list_pages() function in my Wordpress theme. Despite my efforts, I've hit a roadblock in getting the hover effect to work properly. As a beginner in web development, ...

phphtmlcsswordpress

Card columns with dropdown extending into adjacent column

Encountering a strange problem with the card-columns layout in Bootstrap when using dropdown menus within the cards. The issue arises when the dropdown-menu divs of the lower cards bleed into the next column, despite appearing in the correct position. Thi ...

htmlcsstwitter-bootstrapbootstrap-4