Struggling to center a div within another div using margin auto

Hey there, I'm looking for some help with my code. Here's what I have:

.center{
    width: 100%;
    margin: 0 auto;
    border: 1px solid red;
}

.nav{
    background: #606060;
    width: 90%;
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/stylesheet.css" />
        <title></title>
    </head>
    <body>
        <div class="center">
             <div class="nav">
                <p>Hello</p>
             </div>
        </div>
    </body>
</html>

I've experimented with .center without the width: property but it didn't work. I looked through different themes and solutions here but couldn't find an answer. The .nav div remains on the left side. Any assistance would be greatly appreciated. Thank you!

htmlcss

Answer №1

Apply the style margin:0 auto to the .nav class, not the .center class.

.center{
  width: 100%;   
  border: 1px solid red;
}

.nav{
  background: #606060;
  width: 90%;
  margin:0 auto;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/stylesheet.css" />
        <title></title>
    </head>
    <body>
        <div class="center">
             <div class="nav">
                <p>Hello</p>
             </div>
        </div>
    </body>
</html>

Answer №2

It's not necessary to specify margin: 0 auto; when the width is set to 100%. This rule is only needed if you want to center a division with a fixed width inside its parent div.

.center{
    width: 100%;
    border: 1px solid red;
}

.nav{
    background: #606060;
    width: 90%;
    margin: 0 auto;
}
<div class="center">
     <div class="nav">
        <p>Hello</p>
     </div>
</div>

Answer №3

Include the following styles in your .menu class

.menu {
 .
 .
 margin: 0 auto;
 text-align: center
}

Answer №4

When it comes to centering block level elements, a common issue is that they always fit within the 100% width of their container. To address this, I recommend using the inline-block display property instead.

.center{
            width: 100%;
            margin: 0 auto;
            border: 1px solid red;
            text-align:center;
        }

        .nav{
            background: #606060;
            width: 90%;
            display:inline-block;
        }
<div class="center">
            <div class="nav>
                <p>Ahoj</p>
            </div>
        </div>

Answer №5

.navigation-bar {
background-color: #606060;
width: 90%;
display: block;
margin: 0 auto;

}

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

"Taking a break" and indulging in Sass

When transferring Sass classes from another project, I wanted to create a wrapper to contain these styles locally. Here is how my wrapper is currently set up: .my-wrapper { @include "framework-main" } Initially, everything seemed fine. However, I soo ...

csssasslibsass

Tips for Organizing a Vast Array of Repetitive "Nth-Of-Type" CSS Selectors

Imagine an array of vibrant highlights, all controlled through CSS. Is there a way to condense this extensive block of CSS code while achieving the same result? In simpler terms, is it possible to reduce the repetition in the code by using only CSS when ...

csscss-selectorscode-cleanupnon-repetitive

An unusual icon with three varying sizes in a single file

I have come across an interesting favicon file. Click here to download the favicon file Unfortunately, I am unable to upload this image file as it does not meet the required format standards. Upon viewing the file in Windows 7, a fascinating discovery w ...

htmlcssimagefavicon

What is the best way to combine flex-direction and flex-wrap in one row?

I'm working with a React component that looks like this: <Card className='form-margin width card' zDepth='3'> <CardText> <strong>Test</strong><br /> This is some text </Card ...

cssreact-nativeflexboxreact-native-flexbox

Achieving 100% height in a div container using flex while maintaining vertical centering

Struggling to center text and buttons using flexbox while keeping the columns equal? Setting column height as 100% can be a challenge. If you set the height to 100%, vertical alignment may no longer be centered. Avoid resorting to tables or JavaScript for ...

htmlcssflexbox

Implementing a Vue.js v-bind:style attribute onto a dynamically generated element post-page initialization

Let me start by explaining my current issue and dilemma: I have been tasked with converting an existing JS project into a Vue.js framework. While I could easily solve a particular problem using jQuery, it seems to be posing quite a challenge when it comes ...

javascriptcsscanvasvue.js

The creation script in create-react-app automatically includes an external import in the CSS file

I am facing an issue with my create-react-app. Everything works perfectly fine when I run it using npm run start. However, after building it with npm run build, some CSS appears to be missing from the app. Upon investigation, I discovered that the file bu ...

cssnode.jsnpmcreate-react-app

The left side of the form input material is obscured unless the necessary criteria are fulfilled

I am currently in the process of developing the front-end for a web application using the material library. The issue I am facing is that when a field does not meet its requirements, such as needing to enter a 'bedrijfsnaam', the border turns red ...

cssangularmaterial-uiangular-material

Obtain the text value from an HTML button in JSP code

Here is an HTML tag that I have: <button type="submit" name=<%=s %> value=<%=s %>><%=s%></button> The <%=s %> represents a String with white spaces stored on the server, such as "file one". I am facing an issue with extr ...

javahtmljsp

Having difficulty changing placeholder text style in Scss

I'm a newcomer to SCSS and I'm attempting to customize the color of my placeholder text from light gray to dark gray. Below is the HTML code snippet: <div class="form-group"> <textarea class="thread-textarea" ng-maxlength="255" ma ...

csshtmlsass

How can you inform TypeScript about a file that will be included using a script tag?

I am currently utilizing TypeScript for my front-end JavaScript development, and I have a situation where I am loading two scripts from my index.html file as shown below: <script src="replacements.js"></script> <script src="socket.js">&l ...

javascripthtmltypescriptscopefrontend

Material Design Forms in Angular: A Winning Combination

I'm currently working on developing a form using Angular Material. This form allows the user to update their personal information through input fields. I am utilizing "mat-form-field" components for this purpose. However, there are certain fields tha ...

javascripthtmlangularformsangular-material

What steps can be taken to deter users from bookmarking URLs?

On my website, the webpages are dynamically generated using the GET method to fetch variables from a specified URL. For instance, consider the code on the main page: index.php <p><a href="/dynamic.php?name1=value1&amp;name2=value2">next p ...

phphtmlformsurlget

The function was expecting an array for ordering, but instead received an object

I need help filtering my results based on their position. Whenever I try to use the orderBy function, it breaks the page because the result is not an array. How can I fix this issue? I'm currently stuck at this point. This is how I attempt to filter ...

htmlangularjsfirebasefirebase-realtime-database

Mistake made by the author while using the Google Structured Data Test

While reviewing my website, I encountered an error message stating: "Missing required hCard "author"" http://www.google.com/webmasters/tools/richsnippets?q=http%3A%2F%2Fwww.gamempire.it%2Fcastlestorm-ps-vita%2Frecensione%2F131419 Why is this happening? I ...

htmlmicrodatagoogle-search-consolemicroformatsrich-snippets

Starting Web Server using File (file://) protocol

I'm currently using Quasar to develop a Vue SPA web app/page. For this project, the web app will only run by clicking on the index.html file generated by the Quasar packager. This package will not be distributed online or hosted on any domain. My mai ...

javascripthtmlnode.jsvue.jsquasar-framework

Leveraging custom properties in HTML elements with JavaScript

I am in the process of creating a straightforward battleships game that utilizes a 10x10 table as the playing grid. My goal is to make it easy to adjust the boat length and number of boats, which is why I'm attempting to store data within the HTML obj ...

javascripthtmlpropertiescustom-properties

Add a new division to a component when a specific event handler is triggered by another component using React and the reduce method

Currently, I am developing an interactive drag-and-drop application using React and Redux. My goal is to insert a new div element into a container when the ondragstart event handler is triggered by a component. The component responsible for the dragging o ...

javascripthtmlcssreactjsredux

Issue encountered when attempting to remove an element from an array using the delete method

Whenever I attempt to remove an input that has been added, an error message saying "Value is NULL" pops up. I'm looking for a solution where only the selected inputs are deleted when I click on DELETE, instead of all inputs being removed. The myFuncti ...

javascripthtml

Using Slick.JS to Sync Navigation with Main Slider, Automatically Resetting to First Slide

I have a question about the functionality of the Slick.JS plugin that I'm using. In my project, I have two carousels with five slides each. The top carousel displays one slide at a time, while the bottom carousel shows all five slides concurrently. My ...

javascriptjqueryhtmlslick.js