Why is my text align not correctly aligned?-CodePudding

I've been searching this question on Stack Overflow. I've tried but my text align doesn't work, it's just null. tried to use display: block, width: 100% and whatever I could find, but I unfortunately got no luck. I got no error messages whatsoever. as of right now, I have no clue on what is causing it

@import url('https://fonts.googleapis.com/css2?family=Source Sans Pro&display=swap');
/*bg*/
img.bg {
    min-height: 100%;
    min-width: 104px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
          z-index: -1;
}

h1{
font-family: 'Source Sans Pro', sans-serif;
color: white;
text-shadow: 0px 0px 40px #690000;
    font-size: 112px;
    padding-bottom: 20px;
        text-align: center;
            display: block;
            width:100%;
}

  <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>e</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="script.js"></script>
  </body>
</html>
</head>
<body>

<!DOCTYPE html>
<html>
<head>
<style> 
body {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: orange;}
}
</style>
</head>
<body>

<h1 class="center">Denied</h1>

<div></div>

</body>
</html>

CodePudding user response：

So, if you are learning web development then it's ok to make mistakes.

The thing you were doing wrong is just the whole format of the code

body,html,head

These are just used 1 time and you just used them as divs

What you should have done was like this -

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>e</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <style>
      body {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 2s;
        animation-direction: alternate;
      }

      @keyframes example {
        from {
          background-color: red;
        }
        to {
          background-color: orange;
        }
      }
    </style>
  </head>
  <body>
    <div>
      <h1 class="center">Denied</h1>
    </div>
  </body>
  <script src="script.js"></script>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Source Sans Pro&display=swap");
/*bg*/
img.bg {
  min-height: 100%;
  min-width: 104px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

h1 {
  font-family: "Source Sans Pro", sans-serif;
  color: white;
  text-shadow: 0px 0px 40px #690000;
  font-size: 112px;
  padding-bottom: 20px;
  text-align: center;
  display: block;
  width: 100vw;
}

Your syntax of writing the code was very wrong

and I think you would have wanted the heading h1 inside the div like this-

<div>
  <h1 class="center">Denied</h1>
</div>

and not leaving the div empty for no reason at all

After all this the main thing due to which you were not able to center it through text-align: center; was, you just had to take width as 100vw and not 100%

`width: 100vw;`

means you are taking the width of the element in respect of the screen means-

if you are viewing your website through a desktop whose width = 600px then your <h1 class="center">Denied</h1> width will be equal to the width of the screen which is 600px

At Last I would suggest you see the syntax of the html and css properly

A Quick Tip - if you are using VSCode for writing code you can just write ! on an empty HTML file and it will automatically write the HTML template with `head, body,HTML and all that stuff.

CodePudding user response：

You have pasted your html code twice in your answer and this is making a mess to understand your code. Although your question is quite simple and I have answered in as simplest way as I can.

You should set text-align property to a parent div or span instead of direct HTML tag.

And while giving animation please don't give it a width if you want you items to be at center, for clarity see the attached snippet

.denied{
width:100%;
text-align: center;
}
body {
        background-color: red;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 2s;
        animation-direction: alternate;
      }

      @keyframes example {
        from {
          background-color: red;
        }
        to {
          background-color: orange;
        }
      }

<div class="denied">
<h1>Denied</h1>
</div>