Как центрировать элемент внутри контейнера?

Я хочу, чтобы мои <p> элемент должен находиться в центре контейнера <div>, как и в идеально центрированном -- верхнее, нижнее, левое и правое поля разделяют пробелы поровну.

как я могу этого достичь?

div {
  width: 300px;
  height: 100px;
}
p {
  position: absolute;
  top: auto;
}
<div>
  <p>I want this paragraph to be at the center, but it's not.</p>
</div>
27
centering css html text

5 ответов

вам не нужно абсолютное позиционирование Использовать

p {
 text-align: center;
line-height: 100px;

}

и отрегулируйте по желанию...

если текст превышает ширину и идет более одной строки

в этом случае настройка, которую вы можете сделать, это включить свойство display в свои правила следующим образом;

(я добавил фон для лучшего просмотра примера)

div
{
  width:300px;
  height:100px;  
  display: table; 
  background:#ccddcc;  
}


p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell;   
}

играть с ним в эту JBin

enter image description here

38

чтобы получить левое / правое центрирование, а затем применить text-align: center до div и margin: auto до p.

для вертикального позиционирования вы должны убедиться, что понимаете различные способы сделать это, это часто задаваемая проблема:вертикальное выравнивание элементов в div

9

♣вы должны сделать следующие действия :

  1. на мать элемент должно быть расположенный(для EXP вы можете дать ему положение: относительное;)
  2. на дочерний элемент должен был расположить "абсолютное " и значения должны быть такими: top: 0; buttom:0;right:0;left: 0; (быть средним по вертикали)
  3. на дочерний элемент вы должны установить "маржи : авто" (для среднего по вертикали)
  4. на ребенок и мать элемент должны имейте "высоту"и " ширину" стоимостью
  5. на мать элемент =>текст-выровняйте:центр (среднего по горизонтали)

simply просто вот лето этих 5 шагов:

.mother_Element {
    position : relative;
    height : 20%;
    width : 5%;
    text-align : center
    }
.child_Element {
    height : 1.2 em;
    width : 5%;
    margin : auto;
    position : absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    }
1

центрированный и средний контент ?

сделать это так :

<table style="width:100%">
    <tr>
        <td valign="middle" align="center">Table once ruled centering</td>
    </tr>
</table>

Я поиграл здесь

- ха, Дай угадаю .. вы хотите DIVs ..

просто сделайте свой первый выход DIV вести себя как таблица-ячейка, а затем стиль его с вертикальным выравниванием: средний;

<div>
    <p>I want this paragraph to be at the center, but I can't.</p>
</div>

div {
    width:500px;
    height:100px;
    background-color:aqua;
    text-align:center;
    /*  there it is */
    display:table-cell;
    vertical-align:middle;
}

jsfiddle.net/9Mk64/

0

вам нужно только добавить text-align: center на <div>

в вашем случае также удалите оба стиля, которые вы добавили в свой <p>.

Проверьте демо здесь:http://jsfiddle.net/76uGE/3/

Удачи

-2