Html 面临左右浮动属性的问题

我有一个页面需要将div居中，另一个背景div位于最左侧，宽度为100%。我在大的页面中放置了一个内部div，但现在我想将文本垂直对齐到两侧： 我有4个图像要设置在一条线上，如果我把它们全部向右浮动，我会留下空白，反之亦然 这是我的代码：

<div class="programsAndEvents">
        <div class="centerDiv">
            <div class="program">
                <span class="day">JUL 16</span>
                <hr>
                <p class ="prog">"Mathew"</p>
                <button class="btnDetails">DETAILS</button>
            </div>

            <div class="program">
                <span class="day">JUL 17</span>
                <hr>
                <p class ="prog">"Mathew"</p>
                <button class="btnDetails">DETAILS</button>
            </div>

            <div class="program">
                <span class="day">JUL 18</span>
                <hr>
                <p class ="prog">"Mathew"</p>
                <button class="btnDetails">DETAILS</button>
            </div>

            <div class="program">
                <span class="day">JUL 19</span>
                <hr>
                <p class ="prog">"Mathew"</p>
                <button class="btnDetails">DETAILS</button>
            </div>
        </div>
    </div>

如果有人能建议另一种方式，以中心内的div文本我会非常感激。

---

谢谢你

你曾经

.prog

class

margin:10 30无效用于
px
或
em
或
%

尝试使用此css

          .prog {
              margin :10 30; // remove this line 
            }
            .program{
              text-align:center; // add this line
            }

            .day {
                margin-left:35%;  //remove this line
            }
        .program {
            border-right:1px solid; // remove this line
        }
        .program + .program {
            border-left:1px solid; // add line line and this css
        }
    .btnDetails{
      margin:10 50; // remove this line
    }
.centerDiv{
  margin: 0 auto; // add this line 
  text-align: center;  // add this line 
  font-size: 0;  // add this line 
}
.program{
  font-size:12px; // add this line 
}

=======================

演示


.programsAndEvents{
背景色：#F7E4D3；
宽度：100%；
高度：250px；
}
.节目{
宽度：20%；
显示：内联块；
保证金：自动；
文本对齐：居中；
}
.程序+.程序{
左边框：1px实心；
}
.btnDetails{
背景色：#FBC563；
字体大小：粗体；
字体大小：15px；
边界：无；
边界半径：3px；
宽度：120px；
高度：35px；
}
.天{
字体大小：20px；
字体大小：粗体；
字体系列：信使；
}
.centerDiv{
保证金：0自动；
文本对齐：居中；
字号：0；
}
.节目{
字体大小：12px；
}
人力资源{
宽度：10%；
高度：3倍；
边界半径：3px；
背景颜色：灰色；
}
.prog{
颜色：灰色；
字体大小：15px；
}

7月16日

“马修”
细节
7月17日

“马修”
细节
7月18日

“马修”
细节
7月19日

“马修”
细节
增加.program div的宽度并设置program div边框的最后一个子项


程序{
宽度：24.5%；
显示：内联块；
保证金：自动；
右边框：1px实心；
}
.节目：最后一个孩子{
边界：无；
}
尽管我不理解这些更改，但它工作得很好，谢谢
          .prog {
              margin :10 30; // remove this line 
            }
            .program{
              text-align:center; // add this line
            }

            .day {
                margin-left:35%;  //remove this line
            }
        .program {
            border-right:1px solid; // remove this line
        }
        .program + .program {
            border-left:1px solid; // add line line and this css
        }
    .btnDetails{
      margin:10 50; // remove this line
    }
.centerDiv{
  margin: 0 auto; // add this line 
  text-align: center;  // add this line 
  font-size: 0;  // add this line 
}
.program{
  font-size:12px; // add this line 
}