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

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

                                WORD1
                          WORDWORDWORDWORD2

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

12
css html text-alignment

7 ответов

центрирование по горизонтали легко-центрирование по вертикали немного сложно в css, поскольку оно не поддерживается (кроме ячеек таблицы <td>, что является плохим стилем для layouting, если таблица действительно не нужна, как - хорошо-таблица). Но вы можете использовать семантически правильные 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>
21

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

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

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

jsFiddle пример

2

"лучший способ практики" сделать это было бы так:

Так как вы говорите, что вы новичок, я показываю всю структуру документа для вас. Стиль должен идти в тег 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>
1

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

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

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

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

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

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

0

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

<center>Blah</center>

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

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

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