CODEWITHSUNDEEP
htmlcssflexbox
Michelle
Michelle

Reputation: 549

Centering Divs for footer

I have created a footer for my site and it looks perfect, the only problem is I want the whole thing centered. I want the DIV called as-seen-items to be aligned in the middle of the black bar.. but it won't work.

Can someone please tell me how to center this properly. The site is here - https://ffe-dev.flowersforeveryone.co.za/

Thanks

The HTML is this - 

<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>

The CSS is this - 

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

Upvotes: 0

Views: 52

Answers (3)

adel
adel

Reputation: 3507

just add justify-content:center or justify-content:space-around or you can use bootstrap classes: .justify-content-center or .justify-content-around to "as-seen-footer" element or add mx-auto to as-seen-items element!

Upvotes: 0

Soothran
Soothran

Reputation: 1243

use justify-content:center property in as-seen-footer.

more info about flex-box concept: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I have also added align-items: center and justify-content:center properties to .as-seen-items div in order to center them both horizontally and vertically.

Also I removed the inline styles (better to not use them).

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

.as-seen-items>.footer-heading {
  color: white;
  font-size: 30px;
  padding-top: 7px;
}

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

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

.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 class="footer-heading" 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>

Upvotes: 1

fdurna
fdurna

Reputation: 328

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

that's all...

Upvotes: 2

Related Questions