如何将< p>元素在< div>容器？ [英] How to center a <p> element inside a <div> container?

问题描述

我希望我的< p> 元素位于容器中心< div>

如何实现这一点？

  div {width：300px; height：100px;} p {position：absolute; top：auto;}  

 < div& < / div>  
 

<

解决方案

您不需要绝对定位
使用

  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

I want my <p> element to be at the center of a container <div>, as in perfectly centered -- the top, bottom, left and right margins split the spaces equally.

How can I achieve that?

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>

解决方案

You dont need absolute positioning Use

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

}

And adjust at will...

If text exceeds width and goes more than one line

In that case the adjust you can do is to include the display property in your rules as follows;

(I added a background for a better view of the example)

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


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

Play with it in this JBin

这篇关于如何将&lt; p&gt;元素在&lt; div&gt;容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！