CODEWITHSUNDEEP
htmlcsstext-alignment
tt0686
tt0686

Reputation: 1849

How to make text vertically and horizontally center in an HTML page

I have some experience with Java , C , databases , networking etc..But anything related with Html I am a begginer.The only thing that I am looking for is to center two words in the middle of the page(This page will have only those two words).

                                WORD1
                          WORDWORDWORDWORD2

I have tried some WYSIWYG software like KompoZer, but when I looked to the source code, it had generated a horrible static code with a lot of <br> to achieve the vertically center of the page.Anybody could help me finding a good solution to this problem

Upvotes: 16

Views: 64487

Answers (7)

Trunk
Trunk

Reputation: 756

These times full centering is best achieved using either flexbox or grid layout. So if we just want to center some element within its parent we do something like this:

HTML

<div class="parent">
   <div class="child">Some Stuff</div>
</div>

CSS

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

/* Or this way if the page doesn't have to uncenter with changing screen size */
/* .parent {
       display: flex;
       place-items: center;
   }  */

.child {
    text-align: center;   /* If we want the child element's content horiz centered within its own container */
}

Upvotes: 1

acme
acme

Reputation: 14856

Centering horizontally is easy - centering vertically is a bit tricky in css as it's not really supported (besides table cells <td>, which is bad style for layouting unless a table is really needed as - well - a table). But you can use semantically correct html tags and apply table display properties to it.

That's one possible solution - there are many approaches, here is a good article on that.

In your case something like that should be sufficient:

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Hello World</title>
        <style>

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        body {
            display: table;
        }

        .my-block {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        </style>
    </head>
    <body>
    <div class="my-block">
       WORD1<br />
       WORDWORDWORDWORD2
    </div>
    </body>
</html>

Upvotes: 31

Chris Sobolewski
Chris Sobolewski

Reputation: 12925

The "best practice" way to do it would be this:

Since you say you're new, I'm showing the whole document structure for you. Style should go in the head tag so that it is loaded first, and you should avoid inline style as much as possible.

<!DOCTYPE html>
<html>
    <head>
    <style>
    .center{
        text-align:center;
    }
    </style>
    </head>
    <body>
       <div class="center">
           <p>WORD1</p>
           <p>WORDWORDWORDWORD2</p>
        </div>
    </body>
</html>

Upvotes: 1

Teneff
Teneff

Reputation: 32158

You can put the text inside a <div> and align the text using CSS :

<div style="text-align:center;">
    WORD1<br />
    WORDWORDWORDWORD2
</div>

the <div> is a block element which means it will be stretched to 100% width and the text will be in in the center of the page

jsFiddle example

Upvotes: 3

Gatekeeper
Gatekeeper

Reputation: 1616

best way is to put it in some element like div. inside div you can easily center text with text-align: center; (assuming that you set some width to that div). Then you can center that div on page by adding auto margin style (margin: 0px auto;)

w3 manual about centering ;-)

Upvotes: 0

Adjam
Adjam

Reputation: 640

To center text you could use the <center> HTML tag:

<center>Blah</center>

or you could use CSS:

<style>
  .centered_text {
    text-align:middle;
  }
</style>

<a class='centered_text'>Blah</a>

Upvotes: -2

irfanmcsd
irfanmcsd

Reputation: 6561

Just do it like

<div style="text-align:center;">
   WORD1<br />
   WORDWORDWORDWORD2
</div>

Upvotes: 0

Related Questions