Html 将最后一个图元或最后两个图元居中

我有5个div，我想要最后2个或最后一个居中。因为当我调整窗口大小时，我可以在顶部有4div，底部有1，或者顶部有3，底部有2

这里有一个更好的解释

。按钮视频{
宽度：220px；
高度：50px；
背景色：#234CA5；
位置：相对位置；
浮动：左；
利润率：5x10px；
}
.按钮视频a{
位置：绝对位置；
底部：0；
排名：0；
左：0；
右：0；
}
.按钮视频跨度{
字体大小：14px；
颜色：白色；
左：25%；
线高：50px；
}
.玩{
位置：绝对位置；
背景色：白色；
边界半径：10px；
顶部：10px；
左：5px；
宽度：40px；
高度：30px；
}
.三角形{
边缘顶部：5px；
左边距：15px；
宽度：0；
身高：0；
左边框：16px实心#234CA5；
边框顶部：10px实心透明；
边框底部：10px实心透明；
}
.三角形：悬停{
光标：指针；
}
.按钮视频：悬停.三角形{
左边框：16px实心#D3222A；
}

陈述三元数05
P4600-P4700-P4800
P3543pR-P4343RF
动画PIM 4600
动画4700-4800

您可以使用灵活的方框方法轻松实现调整大小时的布局

将所有元素包装在一个容器中<代码>显示：flex和

调整内容：中心

将使最后一个或两个项目居中

.container{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.按钮视频{
宽度：220px；
高度：50px；
背景色：#234CA5；
位置：相对位置；
浮动：左；
利润率：5x10px；
}
.按钮视频a{
位置：绝对位置；
底部：0；
排名：0；
左：0；
右：0；
}
.按钮视频跨度{
字体大小：14px；
颜色：白色；
左：25%；
线高：50px；
}
.玩{
位置：绝对位置；
背景色：白色；
边界半径：10px；
顶部：10px；
左：5px；
宽度：40px；
高度：30px；
}
.三角形{
边缘顶部：5px；
左边距：15px；
宽度：0；
身高：0；
左边框：16px实心#234CA5；
边框顶部：10px实心透明；
边框底部：10px实心透明；
}
.三角形：悬停{
光标：指针；
}
.按钮视频：悬停.三角形{
左边框：16px实心#D3222A；
}

陈述三元数05
P4600-P4700-P4800
P3543pR-P4343RF
动画PIM 4600
动画4700-4800

用文本对齐中心将按钮包裹在容器内，移除浮动按钮并显示内嵌块按钮视频

<div class="container">
    <div class="button-video">
        <a href="../docs/interactif_2005/TRIXELL2005.mpg"></a>
        <div class="play">
            <div class="triangle"></div>
        </div>
        <span>Présentation TRIXELL 05</span>
    </div>
    <div class="button-video">
        <a href="../../4_1_technical_product_manager/documents/P4600-P4700-P4800.avi"></a>
        <div class="play">
            <div class="triangle"></div>
        </div>
        <span>P4600 - P4700 - P4800</span>
    </div>
    <div class="button-video">
        <a href="../../4_1_technical_product_manager/documents/P3543pR-P4343RF.avi"></a>
        <div class="play">
            <div class="triangle"></div>
        </div>
        <span>P3543pR - P4343RF</span>
    </div>
    <div class="button-video">
        <a href="../docs/liens/4600%20Flash.lnk"></a>
        <div class="play">
            <div class="triangle"></div>
        </div>
        <span>Animation PIXIUM 4600</span>
    </div>
    <div class="button-video">
        <a href="../docs/liens/4700%204800%20Flash.lnk"></a>
        <div class="play">
            <div class="triangle"></div>
        </div>
        <span>Animation 4700 - 4800</span>
    </div>
</div>

<style>
.container{
    text-align: center;
}

.button-video{
    width:220px;
    height:50px;
    background-color: #234CA5;
    position:relative;
    display: inline-block;
    margin:5px 10px;
}
.button-video a{
    position:absolute;
    bottom:0;
    top:0;
    left:0;
    right:0;
}
.button-video span{
    font-size:14px;
    color:white;
    padding-left:25%;
    line-height: 50px;
}

.play{
    position:absolute;
    background-color:white;
    border-radius:10px;
    top:10px;
    left:5px;
    width:40px;
    height:30px;
}
.triangle{
    margin-top:5px;
    margin-left:15px;
    width: 0;
    height: 0;
    border-left: 16px solid #234CA5;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.triangle:hover{
    cursor:pointer;
}
.button-video:hover .triangle{
    border-left: 16px solid #D3222A;
}
</style>

陈述三元数05
P4600-P4700-P4800
P3543pR-P4343RF
动画PIM 4600
动画4700-4800
.集装箱{
文本对齐：居中；
}
.按钮视频{
宽度：220px；
高度：50px；
背景色：#234CA5；
位置：相对位置；
显示：内联块；
利润率：5x10px；
}
.按钮视频a{
位置：绝对位置；
底部：0；
排名：0；
左：0；
右：0；
}
.按钮视频跨度{
字体大小：14px；
颜色：白色；
左：25%；
线高：50px；
}
.玩{
位置：绝对位置；
背景色：白色；
边界半径：10px；
顶部：10px；
左：5px；
宽度：40px；
高度：30px；
}
.三角形{
边缘顶部：5px；
左边距：15px；
宽度：0；
身高：0；
左边框：16px实心#234CA5；
边框顶部：10px实心透明；
边框底部：10px实心透明；
}
.三角形：悬停{
光标：指针；
}
.按钮视频：悬停.三角形{
左边框：16px实心#D3222A；
}

---

是的，它可以工作，但IE9不支持，我需要，知道吗？flexbox不支持。但您可以使用CSS表检查此处的回退：