Question

我有一个具有相对位置的外部div，在内部有一个具有绝对位置的内部div，因为我希望内部div粘在外部div的底部（底部：0）。

现在如何在内部div内使按钮居中对齐？

JSX：

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

样式化的组件：

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

Answer 1

将以下内容应用于内部容器（按钮的父级）：

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

这将使您的内部容器以其内容为中心，并覆盖整个外部容器的宽度。

Answer 2

.card{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.5em;
}

这里的高度会调整您的中心代码。

如何居中对齐div中的按钮与绝对位置？

2 个答案: