Difficulty with centering content and setting maximum width

Some time ago I encountered the following code:

HTML:

 <div align="center">
    </div>

CSS:

div{
    background-image: image here;
    background-position: center;
    background-size: 100% auto;
    max-width: 1920px;
}

Recently, I found myself sleepily typing this same code at night without any errors. However, upon saving and refreshing the site, the div failed to display in the center after zooming out. Strange, right?

I decided to remove the max width property and adjust the background-size to a fixed value of 1920px for the first parameter, which surprisingly resolved the issue. Ideally, I am looking for a solution where the div can adjust its size dynamically but never exceed 1920px while remaining centered. Any suggestions on how to achieve this?

htmlcss

Answer №1

The align property is no longer supported (it was deprecated in the past). To center elements, use CSS:

http://jsfiddle.net/F8mk2/2/

<div>
     Content
</div>

CSS:

div{
    background-color: blue;
    background-position: center;
    background-size: cover;
    max-width: /* specify your width */;
    width: 100%;
    height: 100%;
    margin: auto; /* for centering block elements */
}

Answer №2

To enhance the responsiveness of your webpage, consider incorporating this jQuery event and function:

jQuery.event.add(window, "resize", resizeFrame);


function resizeFrame()
{
var newHeight = $(window).height();
var newWidth = $(window).width();
$('.DIV_CLASS_').height(newHeight);
$('.DIV_CLASS').width(newWidth);
}

These code snippets can be beneficial for your project.

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

Generating a dynamic list by utilizing database data once a button has been clicked

I'm looking to create a feature on my website where clicking on a button will populate a paragraph below it with data retrieved from a database query containing two columns. The first column provides the text for a list, while the second column contai ...

phpjavascripthtmlajax

Issue with floating the navbar to the right in Bootstrap 4

I am trying to reposition the navbar (without logo) to the right side using code. To achieve this, I included the class "float-right" like so <div class="collapse navbar-collapse float-right" id="navbarSupportedContent">. However, this modification ...

csstwitter-bootstraptwitter-bootstrap-4

The issue with hiding and showing elements using JavaScript during drag and drop functionality

In my code, I have two boxes with IDs box1 and box2, These boxes can be dragged and dropped into the boxleft element, Upon dropping them, the background image is removed and only the name appears in the box, My issue is that when loading values into box ...

javascripthtmlcss

What could be the reason for the state not initializing with the provided value?

It seems that the latest value is being passed through props, but when it is set as the initial value for state, it doesn't appear. https://i.stack.imgur.com/7dVf2.png import React, { useRef, useState } from "react"; //importing config fr ...

htmlreactjswebreact-hooks

In the iOS app when the Ionic HTML5 select keypad is opened, a bug causes the view to scroll upwards and create empty space after tapping the tab

I am currently working with Ionic v1 and AngularJS, utilizing ion tabs: <ion-tabs class="tabs-icon-top tabs-color-active-positive"> <!-- Home Tab --> <ion-tab icon-off="ion-home" icon-on="ion-home" href="#/tab/home"> <ion-nav ...

javascriptiosangularjshtmlionic-v1

Is it possible to execute appendChild in the context of JS-DOM-creation?

Hey there, I'm a newbie trying my hand at DOM creation. I've encountered a strange issue with appendChild - the first and second tries work fine, but I'm completely stuck on the third attempt. Here's my HTML: <html> <head> ...

javascripthtmldomappendchild

Unique text: "Personalized button design without using SVG

I've been experimenting with creating a button using SVG, but unfortunately, it seems that SVG is not supported on Next.js & Material UI. Below you'll find the code snippet and screenshot I have been working with. Any help or guidance would be g ...

htmlcssmaterial-uifrontendnext.js

Issue with the image posting function in Laravel - why isn't it functioning properly?

Looking for Assistance I've been working on a simple web application using Laravel 6.0 and have encountered an issue with the image post function I developed. Despite not receiving any error messages, the functionality doesn't seem to be work ...

phphtmllaravel

What could be causing certain grid items to display in a disorderly manner?

Currently, I am working on a CSS grid layout that resembles the one showcased in this demo. The challenge I'm facing is related to the ordering of items within the grid. Specifically, every 6th and 7th item seem to be out of order and I would like the ...

htmlcsslayoutcss-selectorscss-grid

In the world of Angular, whitespace is simply treated as non-existent when it comes

Within the controller, I have an array structured as follows: 'Pipe': '|', 'Comma': ',', 'Tab': '\t' }; When configuring ng-options in my code, it is implemented in this manne ...

javascripthtmlangularjsng-options

What is the best way to incorporate and organize the templateHyper folder within an established web project directory?

Can anyone offer advice on how to properly integrate and organize the 'templateHyper' (Bootstrap template) folder within my web project? I've been developing a project using C#, JavaScript, HTML, and Bootstrap's templateHyper. I'm ...

javascriptc#htmlbootstrap-5

Transfer a specific row from a dataTable to another dataTable on a separate php page

Within my programming project, I am working with two tables: table1.php and table2.php In my current setup, I have a script located in table1.php that allows me to pass data to a modal which then passes the data into table2.php. However, I am now facing a ...

phpjqueryhtmlajaxsqlsrv

My JavaScript code is being executed before Chrome Auto-fill

I have successfully created form input elements in Chrome that display a floating label when focused. However, I am encountering an issue when the browser autofills the username and password fields with yellow prefilled text. The JavaScript for the float ...

javascriptjqueryhtmlcssgoogle-chrome

Designing a rounded border radius for various child elements within a layout

I am currently working on creating a circular container that houses an image and a description overlaid at 50% opacity. Here is what I have achieved so far: https://i.stack.imgur.com/pIkO1.png My goal is to apply a uniform border-radius to the entire div ...

htmlcssreactjs

Zurb's Vertical Navigation Bar: A Stylish and Functional Design

I attempted to replicate the left navigation bar from this link: The responsive navigation bar and contents on the right caught my attention. Currently, I am working on a project that requires a similar navigation bar. While I am proficient in HTML and C ...

javascripthtmlcsszurb-foundation-5

Variable in SCSS not being applied as expected

I'm currently grappling with understanding why my alterations to the system colors aren't reflecting as expected. When viewing in Chrome, this is the image I see. https://i.sstatic.net/H6YbW.png However, this is what I anticipate should be vis ...

htmlcssangularsass

When adjusting the zoom level, the positioning of the div containers shifts and clashes

While working on my project, I encountered an issue with the alignment of two div boxes inside the container class. Whenever I zoom in or out on the page, the div boxes collide and change position. I have included my HTML and CSS below, but I am struggling ...

htmlcss

I am experiencing an issue with the initial for-loop in my code as it is not

Upon clicking the start button, the score button, as well as the try again or correct button, are not being updated. Can someone help me figure out what's wrong? I believe the issue lies within this section of the code: for (i=0; i<5; i++) { do ...

javascripthtmlcss

What is the method to advance the opposing line in the dynamic chart?

Here is the link to the code for a dynamic graph. I am struggling with keeping the red line updated and moving forward together with the blue line. I cannot figure out why the red line remains static in the dynamic graph. Any suggestions on how to solve t ...

javascripthtmlgraph

Prevent the display of cascading div elements by using JavaScript and jQuery scripting

My webpage performs a simple check to verify if Javascript and cookies are enabled on the client's browser. If they are enabled, the script displays the content inside div id="conteudo" and hides the warning message inside div id="aviso". If not, the ...

javascriptjqueryhtmlcss