0

I have an outer div with relative position, inside it I have a inner div with absolute position, because I want the inner div sticking to the bottom of the outer div (bottom: 0).

Now how to center align a button inside the inner div?

JSX:

            <Card>
                <CardTitle>{voucher.voucherTitle}</CardTitle>
                <CardContent>{voucher.voucherDesc}</CardContent>
                <CardFooter>
                    <RedeemBtn>{`Redeem`}</RedeemBtn>
                </CardFooter>
            </Card>

Styled components:

const Card = styled.div`
    width: 312px;
    max-width: 100%;
    height: 200px;
    box-sizing: border-box;
    justify-content: center;
    background-image: linear-gradient(#fff calc(100% - 50px),hsla(0,0%,93.3%,.4));
`

const CardFooter =  styled.div`
    position: absolute;
    bottom: 0;
    color: #e40000;
    width: 100%;
    align-content: center;
`
const RedeemBtn = styled.button`
    margin: 0 auto;
`
Praveen Dass
  • 586
  • 1
  • 3
  • 13

2 Answers2

-1

Apply the following to the inner container (button's parent):

width: 100%;
display: flex;
justify-content: center;

This will make your inner container center its content and cover whole outer container width.

Cristian Sarghe
  • 782
  • 6
  • 15
-1
.card{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.5em;
}

Here height will adjust your center code.

Ryan M
  • 18,333
  • 31
  • 67
  • 74
Ayomi Gunasekara
  • 61
  • 3