在div中，我有兩個不同風格的p，我想將兩個p作爲一箇中心在div。如何在div容器中居中放置兩個內嵌塊p？
如果只有一個p，我只是將width: 100%和text-align: center設置爲p。
但如何居中兩個p就像單個p在div？
div {
width: 200px;
height: 50px;
border: 1px solid black;
}
p {
display: inline-block;
}
.first {
color: red;
}
.second {
color: blue;
}<div>
<p class="first">one</p>
<p class="second">two</p>
</div>結果就像這樣：
添加文本對齊：中心;到div標籤
div {
width: 200px;
height: 50px;
border: 1px solid black;
text-align: center;
}
p {
display: inline-block;
}
.first {
color: red;
}
.second {
color: blue;
}<div>
<p class="first">one</p>
<p class="second">two</p>
</div>哇，我認爲這是解決這個問題的最簡單方法。感謝你們所有人的幫助。 – tomfriwel
Always Welcome @tom .. – Santhoshkumar
如果我不需要兩個'p'之間的差距，那麼flexbox看起來會更好。 – tomfriwel
使用的div
div {
width: 200px;
height: 50px;
border: 1px solid black;
display: flex;
justify-content: center;
margin: 0 auto;
}
p {
display: inline-block;
}
.first {
color: red;
}
.second {
color: blue;
}<div>
<p class="first">one</p>
<p class="second">two</p>
</div>div {
width: 200px;
height: 50px;
border: 1px solid black;
}
p {
display: inline-block;
}
.first {
color: red;
}
.second {
color: blue;
}
div {
display: flex;
justify-content: center;
}<div>
<p class="first">one</p>
<p class="second">two</p>
</div>一個flexbox方法...
div {
width: 200px;
height: 50px;
border: 1px solid black;
display: flex;
justify-content: center;
}
.first {
color: red;
}
.second {
color: blue;
}<div>
<p class="first">one</p>
<p class="second">two</p>
</div>我認爲這是你在尋找什麼。
div {
width: 200px;
height: 50px;
border: 1px solid black;
text-align:center;
display: inline-block;
}
p {
display: inline-block;
}
.first {
color: red;
}
.second {
color: blue;
}<div>
<p class="first">one</p>
<p class="second">two</p>
</div>我編輯了代碼檢查是否適用於您。 – weBBer
'文本對齊：中心;'上格將做的工作 – Chiller
謝謝大家。 – tomfriwel