文本未与卡片中心对齐 UI

Question

我有下面的 HTML 和 CSS，我想让文本与 Card 元素的中间（存在于 cardheader 元素中）对齐。但是它不工作你能检查一下是什么问题吗

另外请建议我 CSS 如下所示

是个好习惯

#card {
  margin : 3%;
  padding: 2%;
  border : 1%;
}

#c1,
#c2,
#c3 {
  vertical-align: top;
  margin        : 1%;
  display       : inline-block;
  width         : 30%;
  height        : 600px;
  box-shadow    : 0 4px 10px 0 rgba(0,0,0,0.8);
  transition    : 0.2s;
  border-radius : 8px;
}

#c1:hover,
#c2:hover,
#c3:hover {
  box-shadow: 0 8px 25px 0 rgba(0,0,0,0.8);
}

#c1 {
  background-color: #ecf0f1;
}

#c2 {
  background-color: #ecf0f1;
}

#c3 {
  background-color: #ecf0f1;
}

cardheader {
  font-size  : 20px;
  font-weight: bold;
  text-align : center;
}

Answer 1

您只需将 display: block 添加到您的 #cardheader id

这是更新后的 fiddle：jsFiddle

关于你的问题，这是否是一种好的做法。我建议您对每张卡片使用相同的 class，因为它与我所看到的具有相同的样式。这将使您的 css 更简洁（必须设置样式 1 class 而不是许多 id），并有助于避免在长运行.

中出现混淆

希望对您有所帮助！

Answer 2

将 display:block; 添加到 cardheader 解决了文本对齐问题。

Answer 3

<cardheader> 不是有效的 HTML 标签。我已将您的代码更改为 <div>，卡片标题为 class：

无效：

<cardheader>Option 1</cardheader>

所以改成：

<div class="cardheader">Option 1</div>

然后在 CSS 中，将 cardheader 更改为 .cardheader

https://jsfiddle.net/479nk6so/2/

文本未与卡片中心对齐 UI

Text is not aligning to Center in the Card UI

html

css

text-align