Html 在屏幕中心的两个图像之间居中文本

我在尝试获取一段文本，将其置于页面中心，并在其左右两侧创建一个图像时遇到问题

请记住，我只允许更改定位的CSS代码。HTML完全正确

这里是html代码：

<div id="container">
    <div>
        <img src="../logo.png" id="header">
    </div>
    <div>
        <img src="../barbecue01.jpg" id="pic_1">
        <div id="aboutus">
            <h1>About Us</h1>
            <p>
               Our restaurant has the best barbecue that you can find at Philadelphia. 
               We have an amazing team just to serve you, your family, and your friends.
            </p>
            <h1>Try It Now!</h1> 
        </div>
        <img src="../barbecue02.jpg" id="pic_2">
    </div>
</div>

我遇到的问题是第一张图片在正确的位置，我只是想让第二张图片在右边。出于某种原因，它只是没有。文本应该居中

---

任何帮助都将不胜感激

我建议您使用

flex

而不是float，因为float实际上并不用于布局

堆栈片段

#容器{
宽度：75%；
利润率：15px自动；
}
* {
背景颜色：棕褐色；
}
#容器>分区：第n个子级（2）{
显示器：flex；
}
#图1{
弹性：1；
}
#图2{
弹性：1；
}
#关于{
flex:1200px；
文本对齐：居中；
高度：275px；
颜色：白色；
}
div{
边框：纯色2px黑色；
}

关于我们
我们的餐厅有费城最好的烧烤。我们有一支出色的团队，只为您、您的家人和朋友服务

现在就试试吧！

使其显示块并向左浮动

#pic_1 {
  display: block;
  float: left;
  width: 33%;
}

#pic_2 {
  display: block;
  float: left;
  width: 33%;
}

#aboutus {
  text-align: center;
  display: block;
  float: left;
  width: 33%;
 }

---

你会提供一个JSFIDLE吗？我在检查我以前的答案，发现了这个。是否有我可以调整或添加的内容使其被接受？

#pic_1 {
  display: block;
  float: left;
  width: 33%;
}

#pic_2 {
  display: block;
  float: left;
  width: 33%;
}

#aboutus {
  text-align: center;
  display: block;
  float: left;
  width: 33%;
 }