如何使卡与左对齐文本居中对齐？

Question

新手问题在这里。

我想要一张宽度不超过整个窗口的卡片。我有一张cardStyle，我已在下面定义。

INSERT INTO BetaValues(Name, [Values]) VALUES(@param1, @param2)

我希望我的卡片居中，但文字通常是左对齐。我似乎无法解决这个问题。如果我把它放在div中，我会把所有内容都集中在一起。

感谢您的帮助！

Answer 1

有很多方法可以做到这一点，但最简单的方法是让你的“卡”成为一个块级元素（一个在自己的行上呈现的元素）。它的宽度必须小于100％，其左右边距应设置为auto。应用于左边距和右边距的auto告诉浏览器分割两者之间平均剩余的空间，从而将元素“推”到视口的中心。

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

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

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