CSS центр текста (по горизонтали и вертикали) внутри блока div - PullRequest
Новая
       38

CSS центр текста (по горизонтали и вертикали) внутри блока div

726 голосов
/ 18 апреля 2011

У меня div установлено на display:block (90px height и width), и у меня есть текст внутри.

Мне нужно, чтобы текст был выровнен по центрукак по вертикали, так и по горизонтали.

Я пробовал text-align:center, но он не выполняет горизонтальную часть, поэтому я пробовал vertical-align:middle, но это не сработало.

Любые идеи

Ответы [ 22 ]

4 голосов
/ 22 февраля 2015 
# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}
2 голосов
/ 20 февраля 2018 

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello, World!!
</div>
1 голос
/ 22 марта 2017

Вы можете попробовать следующие методы:

  1. Если у вас есть одно слово или предложение в одну строку, то следующий код может помочь.

    Поместите текст в тег div и присвойте ему идентификатор. Определите следующие свойства для этого идентификатора. 

    id-name {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed red;
}

    Примечание: Убедитесь, что свойство line-height равно высоте деления.

    Изображение

    Но если содержимое состоит из более чем одного слова или строки, это не работает. Кроме того, будут случаи, когда вы не сможете указать размер деления в px или% (когда деление очень маленькое и вы хотите, чтобы содержимое было точно посередине).

  2. Чтобы решить эту проблему, мы можем попробовать следующую комбинацию свойств. 

    id-name {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dashed red;
}

    Изображение

    Эти 3 строки кода устанавливают содержимое точно в середине деления (независимо от размера дисплея). «align-items: center» помогает в вертикальном центрировании, тогда как «justify-content: center» сделает его горизонтально центрированным.

    Примечание: Flex работает не во всех браузерах. Убедитесь, что вы добавили соответствующие префиксы поставщиков для дополнительной поддержки браузера.

1 голос
/ 05 декабря 2016

Это работает для меня (проверено ОК!):

HTML: 

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS: 

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

Вы можете выбрать другие значения, кроме 50%. Например, 25% от центра в 25% от родителя.

1 голос
/ 17 марта 2017 
<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>
1 голос
/ 27 сентября 2017 

.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}
<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>
0 голосов
/ 07 июля 2018 
<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html>
0 голосов
/ 04 июля 2018

Попробуйте следующий пример.Я добавил примеры для каждой категории: горизонтальная и вертикальная 

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>
0 голосов
/ 19 ноября 2013

Регулировка высоты линии для получения вертикального выравнивания. 

line-height: 90px;
0 голосов
/ 15 сентября 2016

Это должен быть правильный ответ.Самый чистый и простой: 

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...