html - 面临左右浮动属性的问题

Question

我有一个页面需要 div 居中，另一个背景 div 位于最左边，宽度为 100% 我已经在大 div 中放置了一个内部 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>

CSS:

.programsAndEvents {
    background-color: #F7E4D3;
    width: 100%;
    height:250px;
}

.program {
    width: 20%;
    display: inline-block;
    margin: auto auto;
    border-right:1px solid;
}

.btnDetails {
    background-color:  #FBC563;
    font-weight: bold;
    font-size: 15px;
    border:none;
    border-radius: 3px;
    width: 120px;
    height: 35px;
    margin:10 50;
}

.day {
    margin-left:35%;
    font-size: 20px;
    font-weight:bolder;
    font-family: courier;
}

hr {
    width:10%;
    height: 3px;
    border-radius:3px ;
    background-color: gray;
}

.prog {
    color: gray;
    font-size: 15px;
    margin :10 30;
}

如果有人可以建议另一种方法使文本在 div 中居中，我将不胜感激。 谢谢

Answer 1

增加.program div的宽度并设置program div border的最后一个 child

.program {
    width: 24.5%;
    display: inline-block;
    margin: auto auto;
    border-right:1px solid;
}
.program:last-child {
   border:none;
}