Текст центра внутри DIV

Question

Я застрял в этом раздражающем вопросе, который у меня есть ... Я не могу центрировать текст внутри div.

Мне удалось получить текст BEGIN в центре, но я хочу, чтобы текст целиком был центрирован.

Вот мой пример - любые советы и трюки ОЧЕНЬ высоко оценены.

#box { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 50%; 
 
    height: 100px; 
 
    width: 450px; 
 
    text-align: center; 
 
    margin: 0px 0px 0px -225px; 
 
    border: 2px solid black; 
 
} 
 
#TEXT { 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 50% 
 
}

<div id="box"> 
 
    <p id="TEXT">This text is not centered</p> 
 
</div>

Мой пример: http://jsfiddle.net/y97myrap/

Answer 1

попытка удалить position: absolute; из #TEXT

http://jsfiddle.net/y97myrap/4/

Answer 2

использования text-align:center;, это будет работать, если вы дадите width на кон рый div ....

сделать div100% широким, тем text-align:center; будет толкать все в центре

#box { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 50%; 
 
    height: 100px; 
 
    width: 450px; 
 
    text-align: center; 
 
    margin: 0px 0px 0px -225px; 
 
    border: 2px solid black; 
 
} 
 
#TEXT { 
 
    position: absolute; 
 
    top: 30px; 
 
    width:100%; 
 
    text-align:center; 
 
    <!-- left: 50% --> 
 
}

<div id="box"> 
 
    <p id="TEXT">This text is not centered</p> 
 
</div>

Answer 3

Фот центрирование элемента, используя позицию абсолютной, общий путь устанавливается:

position:absolute; 
left:50%; 
margin left:{Minus half of the width of the element you want to center} 

Итак, мое предложение R В случае заключается в следующем:

http://jsfiddle.net/y97myrap/1/

с использованием внешнего контейнера DIV, а затем добавить текст выравнивать в том, что один, и если вы хотите, чтобы центрировать высоту, а также, если родительский высота фиксирована вас может просто использовать высоту строки по тексту ту же высоту контейнера, например:

http://jsfiddle.net/y97myrap/5/

Answer 4

#TEXT { 
    position: relative; 
    top:20% 
} 

Try it

Answer 5

 <div style="text-align:center;"> 
     data is here 
    </div> 

в html5

Answer 6

Это простой вопрос применения отрицательного верхнего края половины высоты изображения, а отрицательное левое поле половинной ширины.

Код:

#box { 
position: fixed; 
top: 50%; 
left: 50%; 
margin-top: -50px; 
margin-left: -100px; 
} 

Это сделает положение объекта фиксировано, вы можете настроить позиции DIV в соответствии с вашими потребностями.

Answer 7

Вы можете использовать display: table tecnique.Добавить table в контейнере и table-cell в дочернем элементе:

#box { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 50%; 
 
    height: 100px; 
 
    width: 450px; 
 
    text-align: center; 
 
    margin: 0px 0px 0px -225px; 
 
    border: 2px solid black; 
 
    display: table;/*Add display table*/ 
 
} 
 
#TEXT { 
 
    display: table-cell;/*Add display table cell*/ 
 
    vertical-align: middle;/*add vertical-align middle*/ 
 
}

<div id="box"> 
 
    <p id="TEXT">This text is not centered</p> 
 
</div>

Answer 8

проблема в вашей скрипке является то, что у вас есть позиция: абсолютная; и слева от 50% ... Я предполагаю, что вы пытались сосредоточить его таким образом, но проблема в том, что текстовый блок начнется после 50%. Удалите положение, дайте ему текст-выровнять: center ;.

и выровнять его по вертикали рассмотреть возможность использования ячеек таблицы

Answer 9

Удалить позицию: абсолютная и просто добавить авто margings к вашему #text:

#TEXT { 
    top: 30px; 
    left: 50% 
    margin-left: auto; 
    margin-right:auto; 
} 

Answer 10

Этот код решаемой его:

#TEXT { 
position: relative; 
display: block; 
text-align: center; 
width: 100%; 
top: 30px; 
}