javascript - 如何将卡片与左对齐文本居中对齐？

Question

这里是新手问题。

我正在尝试制作一张宽度不跨越整个窗口的卡片。我在下面定义了一个 cardStyle。

cardStyle:{
    width: '95vw'
    align? : 'center?'
    textAlign? : 'default or left or something'
}

我希望我的卡片居中，但文本通常左对齐。我似乎无法弄清楚这一点。如果我将它放在一个 div 中，我就会让所有东西都居中。

感谢您的帮助!

Answer 1

有很多方法可以做到这一点，但最简单的方法是让您的“卡片”成为 block 级元素(在其自己的行上呈现的元素)。它的宽度需要小于 100%，左右边距应设置为 auto。应用于左边距和右边距的 auto 告诉浏览器在两者之​​间平均分割剩余的任何空间，因此元素被“推”到视口(viewport)的中心。

block 元素内容的对齐与元素本身的位置是分开的。 left 是默认的 text-align 值，它是一个继承值。

.card {
    width: 50vw;
    margin:auto;
    border:1px solid black;
    background:#e0e0e0;
}

<div class="card">I am the card</div>