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

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

                                WORD1
                          WORDWORDWORDWORD2

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

Ответы

Ответ 1

Центрирование по горизонтали очень просто - центрирование по вертикали немного сложнее в 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

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

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

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

jsFiddle пример

Ответ 3

Способ "наилучшей практики" сделать это будет следующим:

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

Не работает для IE6, но все же.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

Ответ 7

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

<center>Blah</center>

или вы можете использовать CSS:

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

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