将内部div与中心对齐如果有两个内部div

Question

我的代码如下。在这里，我试图将'Header - 1 div'与中心对齐。但它没有正确对齐。

<div style="width:100%;background-color:black;">
 <div style="color:red;width:80%;display:inline-block;float:left;text-align:center;">Header 1</div>
 <div style="color:yellow;width:20%;display:inline-block;">Header 2</div>
</div>

Answer 1

试试这个

<div style="width:100%;background-color:black;text-align:center;overflow:auto;">
 <div style="color:red;width:80%;display:inline-block;float:left;padding-left:20%;box-sizing:border-box;">Header 1</div>
 <div style="color:yellow;width:20%;display:inline-block;float:left;">Header 2</div>
</div>