Html Question posted in
Some basic documentation can be found here.

Html – Text-align: center. Works for Header, not for Content

I’ve tried everything here, but I am sure it’s something obvious.

.columnPages header {text-align: center;}
.columnPages content {text-align: center;}
<div class="columnPages">
<header>This is the Header<br /><br />
</header>
<content>This is the content.
</content>
</div>

This is the result:

For some reason, the Header centres, but not the Content. Can anyone explain why there is a difference?
Many thanks

Tried rearranging all the options, changing Left to Right and to Justify

Tags:

2

Answers


  1. 0

    For content add display:block in order to center align content. content is an inline element, and it does not take full width. So, text-align: center has no effect unless we make it a block element.

    <html>

<head>
    <style>
        .columnPages header {
            text-align: center;
        }

        .columnPages content {
            text-align: center;
            display: block;
        }
    </style>
</head>

<body>
    <div class="columnPages">
        <header>This is the Header<br /><br />
        </header>
        <content>This is the content.
        </content>
    </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    The main problem is that you are using a custom html tag that does not have a defined width. You can check this by adding a background to content tag.

    The simplest solution is to change the content tag to main tag.
    https://www.w3schools.com/tags/tag_main.asp

    .columnPages header {
  text-align: center;
}
.columnPages main {
  text-align: center;
}
    <div class="columnPages">
    <header>This is the Header<br><br></header>
    <main>This is the content.</main>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search