CSS: The margin property cannot be used to horizontally center elements

I've been attempting to center the div elements horizontally by using margin: 0 auto;, but for some reason, the items keep showing up on the left side of the HTML page.

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: inline-block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
}

div {
        display: inline-block;
        vertical-align: middle;
        height: 100px;
        line-height: 100px;
        background-color: black;
        padding: 50px;
        margin: 0 auto;
}

p {
        display: inline-block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
}
<body> 
    <main>
        <div>
            <p>center align</p>
        </div>
    </main>
</body>

Can someone point out what mistake I might be making?

htmlcsscenter-align

Answer №1

Make sure to center the text in the main element.

main{
display: inline-block;
background: white;
line-height: 300px;
height: 300px;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
text-align:center;
}

Answer №2

Check out this new CSS layout!

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: inline-block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
}

div {
        display: block;
        vertical-align: middle;
        height: 100px;
        width: 100px;
        line-height: 100px;
        background-color: black;
        padding: 50px;
        margin: 0 auto;
}

p {
        display: inline-block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
}
<body> 
    <main>
        <div>
            <p>center align</p>
        </div>
    </main>
</body>

Answer №3

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
}

div {
        display: block;
        vertical-align: middle;
        height: 100px;
        width: 100px;
        line-height: 100px;
        background-color: black;
        padding: 50px;
        margin: 0 auto;
}

p {
        display: block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
}
<body>
  <main>
    <div>
      <p>Center div</p>
    </div>
  </main>
</body>

In this code snippet, I made some adjustments to center a specific element called main. By changing the display property to block and setting margin to auto, the element is now centered horizontally. However, it's important to include a specified width such as 100vh or 100% (if the parent div has 100vh) in order for the centering effect to work effectively.

Answer №4

To achieve both vertical and horizontal centering, you will need to incorporate either a flexbox or Grid into your code. Here is an updated snippet for you:

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
     margin:auto;
     overflow:hidden;
}

div {
        display: inline-block;
        vertical-align: middle;
        height: 100px;
        line-height: 100px;
        background-color: black;
        margin: 0 auto;
        text-align:center;
        width:100%;
}

p {
        display: inline-block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
        text-align:center;
}
<body> 
    <main>
        <div>
            <p>center align</p>
        </div>
    </main>
</body>

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

Positioning the menu in Bootstrap 4 with an accompanying image

I have been using the template from and I wanted to make a modification to the menu. Instead of having the blue Bootstrap 4 text, I decided to use an image in its place. Everything looked perfect until I checked it on mobile view. The image was supposed ...

csstwitter-bootstraptwitter-bootstrap-4

"Addressing the issue of ineffective form validation for empty or whitespace inputs

I've been working on creating a form and everything seems to be going well except for the validation aspect. It doesn't highlight when intentionally left blank or filled with spaces. I have included "required" in the HTML which partially achieves ...

javascripthtml

Background image that covers the entire screen, div elements that scroll on top of the landing screen initially

As a beginner in the world of coding, I apologize for any simple errors in my attempt. Despite researching this issue, I have not been able to find a precise solution that fits my needs. My goal is to create a full-screen background for the landing page. ...

javascriptjqueryhtmlcss

What is the reason for the absence of styles in index.html when accessing the local server?

When using node.js to open the server, I encountered an issue where the styles are not displaying. Strangely, when opening index.html directly in the browser, all the styles show up correctly. What could be causing this discrepancy? index.html <!doctyp ...

javascriptcssnode.js

Transforming a CSS class within a function into a dynamic jQuery animation

Looking to implement a css class toggling feature in jQuery within a function (shoutout to @Laurence for the code): function rocksType_shift(direction) { $('#rocksType_DBitems_container .before').removeClass('before')[direction](). ...

jqueryjquery-animatecss

Invoke a function within the <img> tag to specify the source path

I have been attempting to achieve something similar to the following: <img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt=""> This is my function: getIcon(status){ switch (status) { case 'Ongoing': ret ...

htmlcssangulartypescript

Optimal alignment of fixed sidebar

I am currently working on making my sidebar sticky on my website . I have implemented a script in the footer that changes the sidebar from a static position to fixed once the page reaches a certain point. The functionality is working correctly, but I am en ...

htmlcss

A fun twist on uploading a file with Python Mechanize

Hey everyone, I'm new to Mechanize and still learning the ropes! I want to automate uploading a .torrent file to a private tracker by completing a form with one or two file upload fields. The kind where you click and browse for the file. The issue i ...

pythonhtmlfile-uploadmechanize

The content of btn-id element in Angular is showing as undefined

I have a JavaScript file located at sample/scripts/sample.js and there are 8 HTML files in the directory sample/src/templates/. My goal is to select a button on one of the HTML files. When I tried using angular.elemnt(btn-id).html(), I received an 'un ...

javascriptcssangularjshtmlangularjs-directive

Position divs to be perfectly aligned and centered

I'm in the process of creating a webpage and facing challenges with aligning my divs properly, specifically the animated company logos. I want them to be positioned side by side rather than on top of each other, with space in between to fit the layou ...

javascriptjqueryhtmlcss

Revise the design of the bootstrap-multiselect interface

I am currently utilizing the bootstrap-multiselect plugin for filtering options, which can be found at https://github.com/davidstutz/bootstrap-multiselect. Everything is functioning correctly except for one issue. My dropdown menu contains approximately 80 ...

jquerycssbootstrap-multiselect

Guide to using the DOM inspector tool with a RAW HTML document

Utilizing PHP Simple HTML DOM Parser, I periodically extract information from various websites. I rely on Chrome's DOM inspector to analyze how to retrieve the desired data. An issue arose when one website (specifically TPB) had improper HTML code th ...

phphtmlgoogle-chromedomweb-scraping

What could be causing the unexpected gap between the first two elements and the third in my flexbox layout?

I am facing an issue with the layout of my third child element. Instead of appearing below the first two children, it is wrapping around to the bottom of the container. Can anyone explain why this is happening and suggest a solution? Even though I have se ...

htmlcssflexbox

What is the best way to adjust the size of a column when hovering

What I am attempting to achieve is, I would like the column box to have a 100% width, and when it is hovered over, I want it to transition to the left, with the width of the column box being about 60%, revealing a second block that shows up as 20% width o ...

jqueryhtmlcsshover

I'm having trouble getting a response from the user.php file in my login system

I am trying to create a login system using ajax and pdo with a button as the submitter. The issue I am facing is that when I click the button to execute, nothing happens. There are no errors in the console. I can see in the network tab that it sends the us ...

javascriptphpjqueryhtmlajax

What is the process for transforming Inline CSS code into an External File CSS Code?

I'm having a bit of trouble with my WordPress website. I want to format the comments section of each post to look like the image below, but I need help converting from inline CSS to external CSS and implementing it on the webpage. https://i.sstatic.ne ...

htmlcsswordpress

Creating user-friendly options for multi-checkbox forms using Django enums

I am facing an issue with my code where it only displays the shorter variable values for 'Plan 1' and 'Plan 2', rather than their longer human-readable forms that I have defined in the model. I am creating checkboxes in an HTML templat ...

pythonhtmldjango

Adjust the color of the input range slider using javascript

Is there a way to modify the color of my slider using <input type="range" id="input"> I attempted changing it with color, background-color, and bg-color but none seem to work... UPDATE: I am looking to alter it with javascript. Maybe something al ...

javascriptcsshtml

What are the steps for integrating a date and time picker bootstrap plugin?

Referencing a tutorial from http://www.w3schools.com/bootstrap/bootstrap_modal.asp: <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <div id="myModal" class="modal fade" role= ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a dynamic slideshow with automated arrow navigation is simpler than you may think

I have successfully tested the slideshow and it is functioning perfectly without any issues. I would like to have a dual slideshow setup (slideshow 1 and slideshow 2) with next and previous buttons, but I am interested in adding an automatic sliding featur ...

javascripthtmlcss