Use CSS and HTML to ensure that all elements on the website are centered

I'm struggling to create a perfectly centered website layout.

Let me share my CSS code with you:

body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-size: cover;
}

.centered{ /* Center the whole body */
   width: 800px;
    margin: 0 auto;
}

Now, let's take a look at my HTML markup:

<!DOCTYPE html>
<html>
    <head>
        <title>Training File Upload</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="centered">
        <h1>MusicAI</h1>
        <form method="POST" >
            <span>Choose midi files:</span>
            <input type="file" name="file[]" multiple required/>
            <br>
            <input type="submit" name="submit" value="Upload for training" />
        </form>
        </div>
    </body>
</html>

Currently, all elements on my site appear in the top right corner. I suspect that my "centered" class isn't functioning correctly, as there is no visible change after refreshing the page.

If you have any suggestions or insights, please share them! Your assistance would be greatly appreciated.

htmlcss

Answer №1

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {

  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -60%);
 
  
}
<div class="centered">
   <div class="child">
       <h1> MusicAI </h1>
       <form method="POST">

             <span> Choose midi files:</span>
   
               <input type = "file" name = "file[]" multiple required/>
            <br>
            <input type="submit" name="submit" value="Upload for training" />
        </form>
    </div>
</div>

Answer №2

Give this a try

body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-size: cover;
}

.centered{ /* Center entire body */
   width: 700px;
   text-align: center;
}
<!DOCTYPE html>
<html>
    <head>
        <title>File Upload Training</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="centered">
        <h1>MusicAI</h1>
        <form method="POST" >
            <span>Select midi files:</span>
            <input type="file" name="file[]" multiple required/>
            <br>
            <input type="submit" name="submit" value="Upload for training" />
        </form>
        </div>
    </body>
</html>

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

Expanding canvas due to the utilization of column-count

I am currently working with chart.js and have a setup that includes two pie charts and a bar chart that I would like to display in a single row. In order to achieve this layout where the bar chart is larger than the pie charts, I implemented the following ...

htmlcssangularchart.js

Currently, I'm developing a Django project and integrating django_bootstrap_icons. Despite successfully installing it with pip and completing all necessary steps, the icons are not displaying on the website

configurations.py INSTALLED_APPS = [ ... 'myapp', 'django_bootstrap_icons', ] ... STATIC_URL = '/static/' MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR,'static,'media') STATIC_ ...

pythonhtmldjangobootstrap-4offline

Extracting information from an external website in the form of XML data

Trying to retrieve data from an XML feed on a remote website , I encountered issues parsing the XML content and kept receiving errors. Surprisingly, fetching JSON data from the same source at worked perfectly. The code snippet used for XML parsing is as f ...

javascriptjqueryhtmlxmlajax

How does JQuery handle color parsing in text?

Is there a way to automatically parse colors in text and apply them to CSS? For instance, if I type #40464f, I want the color to be caught and included in some CSS styles. I am familiar with how to achieve this by adding markup: <span data-color=""> ...

jquerycsscolors

Is it possible to resize the output image in Three.js post-processing?

My game tends to lose performance when I switch to fullscreen mode, but it runs smoothly when the screen is small. I'm wondering if there's a way to render the game in small screen mode first and then scale up the processed render. I'm goin ...

javascripthtmlthree.js

Tips on adding space between a material icon and its corresponding description

I have a design that needs some adjustments. The material icon is too close to the description, and I attempted to create padding by adding the following CSS: .location-secondary-info span:first-child { padding-right: 5px; } However, this change did no ...

cssreactjssassgoogle-material-icons

Switching row visibility based on condition failure is malfunctioning

Having trouble toggling a specific table row based on a condition that is not working as expected. If the status is 'none', I want to open a form in a popup, but if the status is 'done', the popup should not open. <ng-container *ngF ...

htmlangular

What is the process for reducing the value displayed on the label?

I have three labels and I would like to subtract the value of two labels and place the result in the third label. $(document).ready(function() { //Retrieve the values from both labels var value1 = document.getElementById("addition").innerText; ...

javascripthtmljquerysubtraction

Tips for dividing echo output from PHP into two separate divs using jQuery AJAX

I am trying to display two different echoes from PHP in separate divs within my AJAX success function. $.ajax({ url: 'counter.php', type: 'POST', data: { some_data:some_data ...

phphtmljqueryajax

Exploding particles on the HTML5 canvas

I've been working on a particle explosion effect, and while it's functional, I'm encountering some issues with rendering frames. When I trigger multiple explosions rapidly by clicking repeatedly, the animation starts to lag or stutter. Could ...

javascripthtmlcanvas

Arrange the table in alphabetical order and categorize it

Hello there! I am currently working on creating a well-organized table list where names are sorted into specific categories based on their starting letter. For example, names beginning with 'A' will be placed in the 'A category', while ...

jqueryhtmlsorting

How can I easily add both horizontal and vertical arrows to components in React?

Creating a horizontal line is as simple as using the following code: <hr style={{ width: "80%", border: "1px solid black" }} /> You can customize the width, length, and other properties as needed. If you want to display an arrow ...

javascriptcssreactjssvg

broken alignment of right-aligned Bootstrap navbar

I need help with displaying a navbar on my webpage. I want the right side of the navbar to show different elements based on whether the user is logged in or not. If the user is not logged in, it should display "Login" and "Register," and if they are logged ...

htmlcsstwitter-bootstrap

Steps for modifying the width of a horizontal line element so that it aligns with an input element

I'm attempting to dynamically adjust the hr element's length based on the length of the input element by using CSS. Additionally, I'd like to incorporate an animation that triggers when the input is focused. I came across a solution for th ...

htmlcss

Creating adaptable background images with fullpage.js

I'm currently utilizing fullpage.js for parallax scrolling. I'm wondering if there's a way to make the background images adjust responsively when I resize my window. Check out the documentation here: https://github.com/alvarotrigo/fullPage. ...

javascriptjquerycssfullpage.js

Resetting CSS animations using animation-delay

My aim is to animate a series of images on my landing page using Next.js and SCSS. The issue arises when I try to add dynamic animations that reset after each cycle. The delay in the animation causes the reset to also be delayed, which disrupts the flow. I ...

cssanimationnext.jssasscss-animations

What steps can I take to ensure that an image does not exceed the size of its parent tag?

Is there a way to ensure that items placed in a container do not exceed the boundaries of the container? I am trying to use my logo as the home button, but when I set the image height and width to 100%, it becomes larger than the nav bar. The CSS for the n ...

javascripthtmlcssreactjsnext.js

Chrome Browser: Issue with CSS and JavaScript transitions not functioning correctly

I have three images named img1, img2, and img3. Initially, their position is set to -50% absolute top right and left. When I change the position to static with a transition of 2s, they should move to the center. Issue: During the transition, there is snap ...

javascriptjqueryhtmlcssgoogle-chrome

Struggling to remove the translucent effect when hovering over the share button

I have been struggling with a seemingly simple issue for a few hours now. On my website, I have some share buttons located at . Although I want these buttons to remain completely black when hovered over, they are inexplicably becoming slightly transparen ...

htmlcsshyperlinkhover

CSS sticky element not preserving its parent's styles

Hello everyone, I need some assistance with a CSS sticky property issue I am encountering. When I apply the sticky property to a div and scroll down, it doesn't retain its parent's properties as expected. Here is the scenario: I have a Bootstrap ...

javascripthtmlcssbootstrap-4