html - 页脚居中 Div

Question

我为我的站点创建了一个页脚，它看起来很完美，唯一的问题是我希望整个内容都居中。我希望名为 as-seen-items 的 DIV 在黑色条的中间对齐。但它不起作用。

有人可以告诉我如何正确居中吗？该网站在这里 - https://ffe-dev.flowersforeveryone.co.za/

谢谢

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>

CSS 是这样的——

.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;
}

Answer 1

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

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

<div class = "as-seen-footer">
<div class = "as-seen-items" >
<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">
<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>

就这样吧