CSS Text-Align: Center; Is Not Centering Things

CSS text-align: center; is not centering things

I assume you want all the items next to each other, and the whole thing to be centered horizontally.

li elements are display: block by default, taking up all the horizontal space.

Add

div#footer ul li { display: inline }

once you've done that, you probably want to get rid of the list's bullets:

div#footer ul { list-style-type: none; padding: 0px; margin: 0px }

Text-Align: Center not centering properly

The easiest way to solve this would be to give nav ul position: absolute.

Note that this will also move it to the left of the title, so you'll also want to give it right: 0:

nav ul {
  position: absolute;
  right: 0;
}

This can be seen in the following:

* {  margin: 0;  padding: 0;}
body {  background-color: orange;}
nav {  width: 100%;  height: 60px;  background-color: black;  display: flex;}
nav p {  text-align: center;  font-family: arial;  color: white;  font-size: 24px;  line-height: 55px;  float: left;  padding: 0px 20px;  flex: 1 0 auto;}
nav ul {  position: absolute;  right: 0;}
nav ul li {  float: left;  list-style: none;  position: relative;  /* we can add absolute position in subcategories */}
nav ul li a {  display: block;  font-family: arial;  color: white;  font-size: 14px;  padding: 22px 14px;  text-decoration: none;}
nav ul li ul {  display: none;  position: absolute;  background-color: black;  padding: 5px;  /* Spacing so that hover color does not take up entire chunk */  border-radius: 0px 0px 4px 4px;}
nav ul li:hover ul {  /* This means when li is hovered, we want the unordered list inside list item to do something. */  display: block;}
nav ul li ul li {  width: 180px;  /* increases width so that all text can be fit */  border-radius: 4px;}
nav ul li ul li a:hover {  background-color: #ADD8E6;}

<body>  <nav>    <p> The Novel Column </p>    <ul>      <li> <a href="#"> Content </a>        <ul>          <li> <a href="#"> Subsection 1 </a> </li>          <li> <a href="#"> Subsection 2 </a> </li>          <li> <a href="#"> Subsection 3 </a> </li>          <li> <a href="#"> Subsection 4 </a> </li>        </ul>      </li>      <li> <a href="#"> About Us </a> </li>    </ul>  </nav></body>

Text-align and div not centered

You have centered the wrapper, but as the width of it fills the available width you won't see that it's centered.

I think that you want to center the container inside the wrapper instead:

http://jsfiddle.net/dS9Bc/4/

Text will not center?

text-align:center; works fine for me: http://jsfiddle.net/mrchief/bhtZe/

#past {
    position:relative;
    left:0;
    top:363px;
    width:225px;
    height:50px;
    background-image:url('../images/members/roundedbox.png');
    z-index:10;
    text-align:center;    
}

Update: After looking at the page, remove position: absolute from #past h3 as that is preventing the href from center aligning (it gets absolutely positioned).

Also, your div width is small, if you intent to center it on parent background, set #past width to 100%.

text-align: center not working

text-align: center affects pure text nodes as well as child elements that have display: inline; or display: inline-block;. Your assumed child element is h1 which by default has display: block;. So even if it were allowed to have an h1 inside a p, this still wouldn't work (for example if you replaced the <p id="center"> by a <div id="center"> you'd still run into "non-working" centering).

p can only have so-called phrasing content, that is, only certain elements are allowed as child elements inside a paragraph.

Usage of any flow content elements (like e.g. h1) results in automated closing of the "surrounding" p tag. So this is what your browser really renders:

<div id="main">
    <p id="center"> </p>
    <h1> TEST </h1> 
</div>

One last thing, because you said that you're a beginner in frontend matters:

Do not use #id selectors in CSS. Always use CSS .classes instead. When you've progressed alot more, read about the why here: http://oli.jp/2011/ids/

Why is css text-align:center, not centering text? Underlining in the same format is working

.CenterIt { text-align:center;  display:block;}.UnderlineIt { text-decoration:underline;}

<span class="UnderlineIt"><span class="CenterIt">Registration Form</span></span>

text-align center is not centering text on h1 and h2

It's because of position: absolute;. That removes an element from the normal flow of the DOM and makes the element only as big as it needs to fit the content inside of it. So instead of taking up the entire width of the screen, as block elements like h1 and h2 normally would, they only take up as much space as needed to contain the text inside.

You can make the elements width: 100%; or left: 0; right: 0; to make them take up the entire width of the page, then text-align: center; will work as expected.

h1 {  position: absolute;  font-family: 'Passion One';  font-size: 50px;  color: #42E616;  letter-spacing: 1.6rem;  top: calc(80% - 200px);  text-align: center;  text-shadow: 2px 4px 3px rgba(0,0,0,0.6);  opacity: .68;  z-index: 2001;}
h2 {  position: absolute;  font-family: 'Open Sans', monospace;  font-size: 12px;  color: black;  letter-spacing: .4rem ;  top: calc(58% - 30px);  text-align: center;  opacity: .68 ;  z-index: 2002;}
h1,h2 {  left: 0;  right: 0;}

<!DOCTYPE html><html>
<head>
  <link href = "https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link rel = "stylesheet" href="Style.css">
  <meta name = "viewport" content = "width = device-width, initial-scale=1">
  <title> AL-SABA.net </title>
</head>
<header>  <h1> Title </h1>
  <h2> Personal Website </h2></header>    </html>

why is CSS align-items not centering my text

Flexbox is overkill in your case. Just text-align: center; will work fine.

.not-content {
  text-align: center;
}

<div class="not-content">
  <h3>This is an H3 heading</h3>
  <h4>An H4 heading</h4>
</div>

Elements Not Centering

To center the flex items, apply justify-content: center to the container.

And to set the margin of the last button to 0, add this rule:

.Button:last-child {
  margin-right: 0px;
}

Edit/note: I made the buttons smaller for the snippet below to not extend the width of the snippet window.

#Buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 400px;
  margin: 0 auto !important;
  background: blue;
}

.Button {
  margin-right: 50px;
  width: 140px;
  height: 140px;
  background-color: white;
}

.Button:last-child {
  margin-right: 0px;
}

<div id="Buttons">
  <div class="Button"></div>
  <div class="Button"></div>
  <div class="Button"></div>
</div>

CSS Text-Align: Center; Is Not Centering Things