What's causing the discrepancy in my output result?

Here is the HTML markup:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>

<div class="container">

</div>

</body>
</html>

The CSS code is as follows:

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

.container {
    background-color: green;
    border:1px solid black;
    width:80vw;
    height:80vh;
}

I am trying to align the content of my div in the center but it does not seem to be working. What changes should I make to achieve this?

htmlcss

Answer №1

Don't forget to set the height of the body element.

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Implementing this fix should resolve your problem.

Answer №2

To ensure the proper functionality of the flex command, it is essential to include a height property in your code. Here's an example:

section {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

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

"Within the boundaries of two tags, eliminate any spaces when using the display property set

I'm a bit confused about the behavior of display:inline-block. I noticed that when I use inline-block, it displays content in a smaller space across two tags. However, when I switch to using float: left, everything works fine. Does anyone have an ide ...

javascripthtmlcss

Is it possible to modify the color of each HTML division individually, with a delay of 500 milliseconds for each

I have been struggling with dom manipulations in a sorting visualizer game I am developing using Vanilla JS and HTML/CSS3. Specifically, I am having difficulty implementing color changes for each div at a particular time interval of 500ms. How can I succ ...

javascripthtmljquerycss

Struggling to target the child elements of an unordered list with jQuery?

Need help with selecting the children of a list item in a jQuery mobile navigation? I am having some trouble with this task. Here is a fiddle demonstrating what I have done so far: http://jsfiddle.net/jhrz9/ <div data-role="panel" id="left-panel" data ...

javascriptjquerycssjquery-mobilejquery-selectors

What is the best way to limit the size of a scrollable list while also allowing it to shrink when there is not enough content?

I'm currently developing a details page that is pulling information from a database. This details page has the potential to display related data from two other tables, each of which could have zero or multiple records to show. The layout I am using ( ...

htmlcssbootstrap-4scroll

Attempting to showcase two lines within a single row on an html page

Currently, I am working on a project involving ASP MVC and Bootstrap where I need to display the regulation of a transformer in a specific format. This representation can be seen in the image below: https://i.sstatic.net/VzVcA.png My attempt to achieve t ...

htmlcsshtml-table

unusual problem with referencing jQuery mobile pages and implementing click functionality

I am facing a strange issue with my index.html page, which is a website built using jQuery Mobile. The problem arises when I click on a button multiple times within a form on this page - it generates an alert to confirm that the button is working and then ...

jqueryajaxhtmljquery-mobile

If a single checkbox is selected within a group, then every other checkbox should be deactivated and deselected

Here is the code snippet provided: function listen(element, event, callback) { if (element.attachEvent) { element.attachEvent('on' + event, callback); } else { element.addEventListener(event, callback); } } var form = document.que ...

javascriptjqueryhtmlcheckbox

Distinguishing between fonts on a website and Invsion (a tool utilized by designers and front end developers)

I am having difficulty achieving the exact look of our website font as intended by the designer. We have utilized Google's 'Source Sans Pro' font file. I have attempted various strategies: Using the font directly from Google [ Downloading ...

cssfontsfrontendwebfontsweb-frontend

Reading JavaScript files using the HTML 5 File Reader

Currently, I am working on a feature that allows users to drag and drop a folder containing JavaScript files into an HTML5 page. Here is the code snippet for my implementation: $scope.files = []; //Establish dropzone var dropbox; dropbox = document.getEle ...

javascriptangularjshtmlfilereader

Take away the attention from the span element

I have been experimenting with the following jsfiddle and attempted various methods suggested in this Stack Overflow thread, but I am struggling to remove the focus from the "feedback" span after clicking on the cancel button in jQuery confirm dialog. Her ...

javascriptjqueryhtmltippyjs

Unable to showcase information in the center of an HTML document

Hello, I'm facing an issue with my HTML page that has a left vertical nav-bar. Despite my efforts, I can't seem to display content (text) in the center of the page as shown in the screenshot with the red oval. I've attempted inserting text ...

javascripthtmlcssbootstrap-5

Setting a global variable in JavaScript on BigCommerce platform

Can a BigCommerce global variable be assigned to a JavaScript variable for text modification purposes? Here's an example: <script type = "text/javascript">//<![CDATA[ var test = %%GLOBAL_ProductDesc%%; //insert modification to "test ...

javascripthtmlbigcommerce

Identify the element with the active class name as the primary focus

Can anyone assist with this issue? Below is an example of the code I am working with: import React, { useRef, useEffect } from "react"; function App() { const inputRef = useRef(null); useEffect(() => { const testElement = document.qu ...

htmlcssreactjsjsx

Position elements flush to the left and right

Is it possible to align the text in divs so that it perfectly lines up along the edges? .name { margin: 0 0 5px 10px; font-weight: bold; font-size: 14px; } .row { margin: 0 0 5px 10px; width: 500px; justify-content: space-between; } < ...

htmlcss

"Add a +1/Like/Share feature to enhance the user experience of your mobile web

In the process of developing a web-based mobile application with jQuery Mobile. Looking to incorporate buttons for "+1" and "Share" (for Google+) as well as "Like" and "Share" (for Facebook), but each button utilizes a popup window which goes against crea ...

jqueryhtmlfacebookjquery-mobilegoogle-plus

When scrolling, use the .scrollTop() function which includes a conditional statement that

As a newcomer to jQuery, I've been making progress but have hit a roadblock with this code: $(window).scroll(function(){ var $header = $('#header'); var $st = $(this).scrollTop(); console.log($st); if ($st < 250) { ...

javascriptjqueryhtmlcsshover

Using jQuery to select the input value and append content, then utilizing the same input value as the added content

I need help with a task involving two columns. I would like to select either column 1, column 2, or both to add content to using checkboxes. My approach is to use the "value" attribute of the checkbox as a $selector. After selecting the columns, I want to ...

jqueryhtmlinputselector

"jQuery now has the ability to delete multiple items at once, setting it

One interesting feature I have implemented is a table that contains buttons which appear when you hover over its rows. Specifically, there is a delete button that triggers a custom confirm dialog box; this dialog simply accepts a callback function to execu ...

htmljquery

`replace an element and its children with the same identifier`

For my project, I am attempting to dynamically load e-book chapter pages using ajax requests. Here is an example of the HTML markup I am working with: <html><body> <div id="p5"> <div id="p6"> <p class="heading">heading1</p ...

javascriptjqueryhtmlcss

Issue with Bootstrap 3: Element refuses to remain within the defined width of the div container

While utilizing bootstrap 3 within a small div, I noticed that when I enlarge the window by dragging it horizontally, the fields (username and password input fields) that should remain inside the div end up shifting towards the center of the window. Can an ...

htmlcsstwitter-bootstrap-3