居中可變寬p元素

如何居中可變寬p元素在div中？居中可變寬p元素

可以很容易地使用居中margin: 0px auto;固定寬度塊元件。但是，如何將p元素的寬度設置爲精確包含子元素，並將其保留爲block，這對於頁邊距起作用是必需的？

HTML

<div> 
<p>Center me</p> 
</div>

CSS

div { 
    width: 300px; 
} 

p { 
    margin: 0px auto; 
}

來源

2013-06-12 Don P

Working jsFiddle Demo

p是block元素，當你把另一塊元素：

<div> 
    <p>Center me</p> 
</div>

它的width，將成爲母公司的寬度（與你的CSS，300px）。規則margin: 0 auto;或者更清晰，爲margin-left和margin-right設置auto，將把元素本身中心父的。

因此，當parent和child具有相同的寬度時，它是沒有意義的。

如果你願意，你可以使中心內的文字與text-align財產，和你的情況，你可以使用margin您div元素（如果它的父body爲例）：

<body> 
    <div> 
     <p>Center me</p> 
    </div> 
</body>

而且在CSS：

div { 
    width: 300px; 
    margin: 0 auto; 
} 

p { 
    text-align: center; 
}

你也可以讓你的p元素作爲inline-block，使text-align: center;父：

body { 
    background: gray; 
} 

div { 
    margin: 0 auto; 
    width: 300px; 
    background: yellow; 
    text-align: center; 
} 

p {  
    display: inline-block; 
    background: pink; 
}

enter image description here

檢查jsFiddle demo。

來源

2013-06-12 06:22:02

inline-block正常工作:) –

使用text-align:center

Fiddle

p { 
    text-align:center; 
}

來源

2013-06-12 06:17:41 MrCode

p沒有包裝到它的內容:)。 –

居中可變寬p元素

回答

相關問題