Блог

Главная - Вопросы по программированию - Центрирование текста в середине родительского элемента

Центрирование текста в середине родительского элемента

#html #css

#HTML #css

Вопрос:

 <div id="wrapper" style="height:400px;width:400px;">
 <div id="example">
  Text
 </div>
</div>

Я ищу способ попасть #example в центр (слева, справа, сверху и снизу) #wrapper .

Комментарии:

1. Вы имеете в виду «ширину», а не «вес»?

2. Почти наверняка означает «ширину», обновлено

Ответ №1:

Я думаю, что есть несколько способов добиться того, чего вы хотите. Можно было бы:

 #wrapper{
    display:table-cell;
    width:400px;
    height:400px;
    vertical-align:middle;
    border:1px solid red;
}
#example{
    width:200px;
    margin:auto;
    text-align:center;
    background:blue;
}

Демонстрация: http://jsfiddle.net/SsD4Q/3 /

Надеюсь, это как-то помогло!

Комментарии:

1. position:relative;top:50% не центрирует элемент по вертикали. Кроме того, содержимое вашего текста не будет выровнено по горизонтали по центру.

2. @RobW: Вы правы насчет top: 50% (только что попробовал сам) и удалите его из моего ответа. Чтобы выровнять текст по горизонтали, вы всегда можете добавить текст-align:center

Ответ №2:

Попробуйте привести #example margin: 0 auto;

Второе свойство — это левое / правое поле. Авто должно центрировать его.

Редактировать: Извините, что это не центрируется по вертикали. Я неправильно понял. Пожалуйста, смотрите http://www.jakpsatweb.cz/css/css-vertical-center-solution.html для вертикального центрирования.

Комментарии:

1. это не центрирует вертикально

2. Спасибо, что указали на это. Я обновил свой ответ. Похоже, вы нашли хорошую статью из css-tricks, чтобы ответить на вопрос.

Ответ №3:

Выравнивание по вертикали — сложная задача, если вы не используете таблицы.

Я предлагаю вам прочитать эту статью о центрировании элементов. http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image /

Однако выравнивание по горизонтали выполняется легко…

Назначьте ширину и используйте поля: авто

 #example {width:100px; margin: 0 auto;}

Ответ №4:

 <div id="wrapper" style="height:400px;weight:400px;">
  <div id="vertical" style="height: 50%; width: 100%; margin-top: -25px"></div>
  <div id="example" style="margin: 0 auto; height: 50px">
    Text
  </div>
  </div>

Установите верхнее поле минус половина высоты примера div

Ответ №5:

Мне не нравятся текущие предлагаемые решения… поскольку они полагаются либо на отображение в виде ячеек таблицы, либо на использование статических высот #example и отрицательных полей.

Вот мое предложение, учитывая #wrapper , что имеет фиксированную высоту:

  • Установите #wrapper высоту строки, равную ее высоте;
  • Установите #wrapper выравнивание текста по центру и выравнивание по вертикали по центру;
  • Установите #example для отображения значение inline-block, чтобы оно центрировалось по вертикали и горизонтали, но все равно работало как блок;
  • Сделайте #example span вместо этого, чтобы IE8- позволял ему быть встроенным блоком.

http://jsfiddle.net/aneves_sw/yse9w/