Как сделать текст вертикально и горизонтально по центру на странице HTML - PullRequest
Новая
       8

Как сделать текст вертикально и горизонтально по центру на странице HTML

13 голосов
/ 22 марта 2012

У меня есть некоторый опыт работы с Java, C, базами данных, сетями и т. Д. Но все, что связано с Html, я начинающий. Единственное, что я ищу, это центрировать два слова в середине страницы (Эта страница будет иметь только эти два слова). 

                                WORD1
                          WORDWORDWORDWORD2

Я пробовал какое-то программное обеспечение WYSIWYG, например KompoZer, но когда я посмотрел на исходный код, он сгенерировал ужасный статический код с большим количеством <br> для достижения вертикального центра страницы. хорошее решение этой проблемы

Ответы [ 6 ]

23 голосов
/ 22 марта 2012

Простое центрирование по горизонтали - центрирование по вертикали немного сложнее в css, поскольку на самом деле оно не поддерживается (кроме ячеек таблицы <td>, что является плохим стилем для компоновки, если таблица действительно не нужна - ну, в общем, таблица).Но вы можете использовать семантически правильные HTML-теги и применять к ним свойства отображения таблицы.

Это одно из возможных решений - существует множество подходов, здесь есть хорошая статья на этот счет .

В вашем случае должно быть что-то подобное: 

<!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>
2 голосов
/ 22 марта 2012

Вы можете поместить текст в <div> и выровнять текст с помощью CSS: 

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

<div> - это блочный элемент, который означает, что он будет растянут до ширины 100% и текстбудет в центре страницы

jsFiddle пример

1 голос
/ 22 марта 2012

«Лучшая практика» - сделать это так:

Поскольку вы говорите, что вы новичок, я показываю всю структуру документа для вас. Стиль должен идти в теге head, чтобы он загружался первым, и вам следует избегать встроенного стиля в максимально возможной степени . 

<!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 голосов
/ 22 марта 2012

лучший способ - поместить его в некоторый элемент, например, div.внутри div вы можете легко отцентрировать текст с помощью text-align: center; (при условии, что вы установили некоторую ширину для этого div).Затем вы можете центрировать этот div на странице, добавив автоматический стиль поля (margin: 0px auto;)

w3 руководство по центрированию; -)

0 голосов
/ 22 марта 2012

Для центрирования текста вы можете использовать тег HTML <center>: 

<center>Blah</center>

или CSS: 

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

<a class='centered_text'>Blah</a>
0 голосов
/ 22 марта 2012

Просто сделай это как 

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