如何在 div 容器中居中放置两个行内块 p？

Question

在一个div中，我有两个不同风格的p，我想在div.[=25=中将两个p作为一个居中]

如果只有一个p，我就把width: 100%和text-align: center设置成p。

但是如何将两个 p 居中，就像 div 中的单个 p 一样？

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>

结果是这样的：

Answer 1

为 div

使用 flexbox 和自动 margin

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>

Answer 2

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>

Answer 3

添加 text-align: center; 到 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>

Answer 4

一个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>

Answer 5

我想这就是你要找的。

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>

如何在 div 容器中居中放置两个行内块 p？

How to center two inline-block p in a div container?

html

css

centering