The issue of centering not working with a specified width under the CSS rule `margin: 0 auto

Question

The issue of centering not working with a specified width under the CSS rule `margin: 0 auto

As I was creating sections for a mini "about me" page, I encountered an issue with setting margins in all divs (this one is the most important). Despite specifying widths and heights, I couldn't get margin: 0 auto; to work.

body {
background: #aaa;
}

#about {
font-family: arial;
width: 300px;
height: 20px;
text-align: center;
padding-left: 10px;
opacity: 0.5;
padding-top: 4px;
border-radius: 10px;
background-color: #000;
position: fixed;
margin: 0 auto;
overflow: hidden;
font-size: 11px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

#about:hover {
height: 250px;
}

.about-text {
width: 300px;
height: 220px;
overflow-y: auto;
margin-top: 5px;
}

<div id="about">
<font face="arial" color="#fff">&#120016;&#120043;&#120056;&#120062;&#120061; &#120028;&#119942;</font>

<div class="about-text">
<font face="arial" color="#fff"><br>
Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. ... (repeated text) ... </font>
</div>
</div>

html css

Answer 1

Answer №1

The div element has a CSS property of position:fixed. This removes it from the normal document flow, so you must explicitly define its left (or right) position - something like the following:

body {
background: #aaa;
}

#about {
font-family: arial;
width: 300px;
height: 20px;
text-align: center;
padding-left: 10px;
opacity: 0.5;
padding-top: 4px;
border-radius: 10px;
background-color: #000;
position: fixed;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
overflow: hidden;
font-size: 11px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

#about:hover {
height: 250px;
}

.about-text {
width: 300px;
height: 220px;
overflow-y: auto;
margin-top: 5px;
}

<div id="about">
<font face="arial" color="#fff">&#120016;&#120043;&#120056;&#120062;&#120061; &#120028;&#119942;</font>

<div class="about-text">
<font face="arial" color="#fff"><br>
Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.</font>
</div>
</div>

Answer 2

The div element has a CSS property of position:fixed. This removes it from the normal document flow, so you must explicitly define its left (or right) position - something like the following:

body {
background: #aaa;
}

#about {
font-family: arial;
width: 300px;
height: 20px;
text-align: center;
padding-left: 10px;
opacity: 0.5;
padding-top: 4px;
border-radius: 10px;
background-color: #000;
position: fixed;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
overflow: hidden;
font-size: 11px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

#about:hover {
height: 250px;
}

.about-text {
width: 300px;
height: 220px;
overflow-y: auto;
margin-top: 5px;
}

<div id="about">
<font face="arial" color="#fff">&#120016;&#120043;&#120056;&#120062;&#120061; &#120028;&#119942;</font>

<div class="about-text">
<font face="arial" color="#fff"><br>
Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.</font>
</div>
</div>

Answer 3

Answer №2

To ensure proper encapsulation, wrap the content within a container div as shown below:

body {
background: #aaa;
}
.container{
width: 100%;
margin: 0 auto;
display: block;
}
#about {
font-family: arial;
width: 300px;
height: 20px;
text-align: center;
padding-left: 10px;
opacity: 0.5;
padding-top: 4px;
border-radius: 10px;
background-color: #000;
position: relative;
margin: 0 auto;
overflow: hidden;
font-size: 11px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

#about:hover {
height: 250px;
}

.about-text {
width: 300px;
height: 220px;
overflow-y: auto;
margin-top: 5px;
}

<div class="container">
<div id="about">
<font face="arial" color="#fff">𝓐𝓫𝓸𝓾𝓽 𝓜𝒆</font>

<div class="about-text">
<font face="arial" color="#fff"><br>
Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.</font>
</div>
</div>
</div>

Answer 4

To ensure proper encapsulation, wrap the content within a container div as shown below:

body {
background: #aaa;
}
.container{
width: 100%;
margin: 0 auto;
display: block;
}
#about {
font-family: arial;
width: 300px;
height: 20px;
text-align: center;
padding-left: 10px;
opacity: 0.5;
padding-top: 4px;
border-radius: 10px;
background-color: #000;
position: relative;
margin: 0 auto;
overflow: hidden;
font-size: 11px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

#about:hover {
height: 250px;
}

.about-text {
width: 300px;
height: 220px;
overflow-y: auto;
margin-top: 5px;
}

<div class="container">
<div id="about">
<font face="arial" color="#fff">𝓐𝓫𝓸𝓾𝓽 𝓜𝒆</font>

<div class="about-text">
<font face="arial" color="#fff"><br>
Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.</font>
</div>
</div>
</div>

The issue of centering not working with a specified width under the CSS rule `margin: 0 auto

Answer №1

Answer №2

Similar questions

Purge precise LocalStorage data in HTML/JavaScript

Text box input that displays the latter portion before the initial part

Crafting a responsible table design with the help of grid layout techniques

using http to handle a 404 error

Creating a Distinct Interior Array Separate from the Exterior

altering the number of columns in Bootstrap based on screen size to prevent stacking

What is the best way to add a darker tint to the background behind my overlay panel in jQuery

bridging information from tables with text fields in forms

The HTML element seems to be missing its height parameter

Ways to prevent onMouseDown from triggering when the element is exclusively clicked?

Having trouble updating the icon on my website using FontAwsome

Utilizing CSS3 Pseudo Elements for Styling a Graph

Error: The use of import statement is not allowed outside a module in JavaScript due to a Syntax

Error encountered: $(...).pickadate is not defined as a function

Is it possible to integrate a Twitter bootstrap theme into a Rails 4 application if the Vendor/assets directory is missing?

Moving the element from the right side

Tips for fetching integer numbers in a string in JavaScript in sequential order starting from the left side

Ways to conceal a div element when the JSON data does not contain a value

Vuetify - Best practices for vertically aligning rows in a v-treeview component

I encountered a frustrating issue with saving user input data using localStorage