Flexbox centre aligning does not work as expected

Question

I'm trying to center align a triangle at the bottom of a div using flex box. The method i have previously used is not working as expected. I'm also using Tailwindcss but you can still see the CSS code below.

 <div class="flex-col items-center mb-20 h-64">
        <div class="bg-yellow-300 w-full h-56">
         </div>
        <div class="arrow-down">
        </div>
    </div>

flex-col {
  flex-direction: column;
}

.items-center {
    align-items: center;
    
}

.bg-yellow-300 {
   background-color: #808080;
 
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    
    border-top: 20px solid #f00;
  }

.h-56 {
    height: 14rem;
}

Codepen link

score 1 · Accepted Answer · answered Aug 11 '20 at 18:30

1

To center the triangle, add the rule margin: 0 auto 0 auto for the arrow-down class.

.flex-col {
  flex-direction: column;
}

.items-center {
    align-items: center;
    
}

.bg-yellow-300 {
   background-color: #808080;
 
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    margin: 0 auto 0 auto;
  }

.h-56 {
    height: 14rem;

 <div class="flex-col items-center mb-20 h-64">
        <div class="bg-yellow-300 w-full h-56">
         </div>
        <div class="arrow-down">
        </div>
    </div>

answered Aug 11 '20 at 18:30

s.kuznetsov

14,870
3
10
25

1

Thanks Sergey! That worked perfectly – Christian Aug 11 '20 at 18:34
1

If my answer helped you, please check the box to the left of my answer. Happy to help :) – s.kuznetsov Aug 11 '20 at 18:37
1

I forgot to tell you... you have a `flex-col` class, and in css you specified it without a dot. You have `flex-col` like this, but you need `.flex-col` like this. – s.kuznetsov Aug 11 '20 at 18:46
1

good spot! thanks again – Christian Aug 11 '20 at 18:49

Flexbox centre aligning does not work as expected

1 Answers1