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

前端未结

关注

 7  1693

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

相关标签:

7条回答

情话喂你

2020-12-01 21:39
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
一个人的身影

2020-12-01 21:50
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
孤街浪徒

2020-12-01 21:58
Just do it like
```
<div style="text-align:center;">
   WORD1<br />
   WORDWORDWORDWORD2
</div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
有刺的猬

2020-12-01 22:00
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
0 讨论(0)
发布评论:

提交评论
- 加载中...
礼貌的吻别

2020-12-01 22:00

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 ;-)

0 讨论(0)
发布评论:

提交评论
- 加载中...

旧时难觅i

2020-12-01 22:01

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>

0 讨论(0)

1 2 下一页