Wie zentriere ich zwei Inline-Block p in einem Div-Container?

Question

In einem div, ich habe zwei mit verschiedenen Stil, und ich möchte die beiden als eine in div zu zentrieren.

Wenn nur eine p, ich nur width: 100% und text-align: center zu p.

Aber wie zentriert man zwei genau wie einzelne p in 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>

Das Ergebnis wie folgt aus:

Answer 1

hinzufügen text-align: center; div-Tag

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 2

Mit einem Flexbox und Auto margin für die 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>

Answer 3

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 4

A flexbox Ansatz ...

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

Ich denke, das ist das, was Sie suchen.

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>