Html 页脚对中div

我已经为我的网站创建了一个页脚，它看起来很完美，唯一的问题是我想把整个事情放在中心。我希望DIV被称为被看到的项目在黑色酒吧中间对齐。但这行不通

有人能告诉我如何正确居中吗。地点在这里-

谢谢

HTML是这样的-

<div class = "as-seen-footer">
<div class = "as-seen-items" style = "display:flex;" >
<h1 style="color:white; font-size:30px; padding-top: 7px;" valign="middle"> AS FEATURED IN </H1>
<div class="verticalLine">
</div>
<div class = "as-seen-images" style = "display:flex;">
<img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/news_24_logo.svg" alt="Media 24" class="alignnone size-full wp-image-5021" style="width: 150px;"/>
<img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/home_magazine_logo.svg" alt="Home Magazine" class="alignnone size-full wp-image-5022" style="width: 100px;"/>
<img src="https://ffe-dev.flowersforeveryone.co.za/wp-content/uploads/2019/08/tuis_tydskrif_logo.svg" alt="" class="alignnone size-full wp-image-5023" style="width: 100px;" />
</div>
</div>
</div>

.as-seen-items {
    display:flex;
    text-align: center;
}

.as-seen-images {
    display:flex;
}

.as-seen-footer {
  background: #000000;
  margin-top: 20px;
  text-transform: uppercase;
  display: flex;
}

.verticalLine {
    border-left: solid #fff;
    height: 80px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
}

---

使用

页脚所示的
中的
对齐内容：中心
属性

有关伸缩框的更多信息
概念：

我还将
align items:center
和
justify content:center
属性添加到
。如图所示，items
div可以水平和垂直居中

我还删除了内联样式（最好不要使用它们）


。如图所示{
显示器：flex；
文本对齐：居中；
证明内容：中心；
对齐项目：居中；
}
.如图所示，项目>页脚标题{
颜色：白色；
字体大小：30px；
填充顶部：7px；
}
.如图所示{
显示器：flex；
}
.如页脚所示{
背景：#000000；
边缘顶部：20px；
文本转换：大写；
显示器：flex；
证明内容：中心；
}
黄花蛇舌草{
左边框：实心#fff；
高度：80px；
边缘顶部：10px；
边缘底部：10px；
左边距：20px；
右边距：20px；
}

如
在
中使用
内容：居中对齐
属性，如页脚所示

有关伸缩框的更多信息
概念：

我还将
align items:center
和
justify content:center
属性添加到
。如图所示，items
div可以水平和垂直居中

我还删除了内联样式（最好不要使用它们）


。如图所示{
显示器：flex；
文本对齐：居中；
证明内容：中心；
对齐项目：居中；
}
.如图所示，项目>页脚标题{
颜色：白色；
字体大小：30px；
填充顶部：7px；
}
.如图所示{
显示器：flex；
}
.如页脚所示{
背景：#000000；
边缘顶部：20px；
文本转换：大写；
显示器：flex；
证明内容：中心；
}
黄花蛇舌草{
左边框：实心#fff；
高度：80px；
边缘顶部：10px；
边缘底部：10px；
左边距：20px；
右边距：20px；
}

如

。如页脚所示{
显示器：flex；
证明内容：中心；
背景：#000000；
边缘顶部：20px；
文本转换：大写；
}
.如所见项目{
显示器：flex；
文本对齐：居中；
}
.如图所示{
显示器：flex；
}
黄花蛇舌草{
左边框：实心#fff；
高度：80px；
边缘顶部：10px；
边缘底部：10px；
左边距：20px；
右边距：20px；
}

如

。如页脚所示{
显示器：flex；
证明内容：中心；
背景：#000000；
边缘顶部：20px；
文本转换：大写；
}
.如所见项目{
显示器：flex；
文本对齐：居中；
}
.如图所示{
显示器：flex；
}
黄花蛇舌草{
左边框：实心#fff；
高度：80px；
边缘顶部：10px；
边缘底部：10px；
左边距：20px；
右边距：20px；
}

如
只需添加
justify content:center
或
justify content:space around
或您可以使用引导类：
。justify content center
或
。将
周围的内容对齐到“可见页脚”元素，或将
mx auto
添加到
可见项
元素
 只需添加
justify content:center
或
justify content:space around
或您可以使用引导类：
。justify content center
或
。将内容around
对齐到“可见页脚”元素，或将
mx auto
添加到
可见项
元素
 请注意，
标记不使用，也不需要结束斜杠，而且在HTML中从未使用过。还请注意，
valign
属性已过时多年。好的，谢谢。。我只是在学习！如何使所有div垂直对齐其内容？当我将整个黑条的高度设置为更大时，我无法使文本或垂直线垂直对齐请注意，
标记不使用，也不需要结束斜杠，而且在HTML中从未使用过。还要注意，
valign
属性已过时多年。好的，谢谢。。我只是在学习！如何使所有div垂直对齐其内容？当我将整个黑条的高度设置为更大时，我无法使文本或垂直线垂直对齐