文本未与卡片 UI 中的中心对齐

Question

我有以下 HTML 和 CSS，我想让文本与 Card Element 的中间（存在于 cardheader 元素中）对齐。但是它不起作用，请您检查一下是什么问题。

另外请建议我使用如下 CSS 是否是一种好习惯

JSFiddle

#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

<cardheader> 不是有效的 HTML 标记。我已将您的代码更改为 <div>，其中包含卡片标题类：

无效：

<cardheader>Option 1</cardheader>

所以改成：

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

在 CSS 中，将 cardheader 更改为 .cardheader

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

Answer 2

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

Answer 3

您所要做的就是将display: block 添加到您的#cardheader id

这是一个更新的小提琴：jsFiddle

关于你的问题，如果这是一个好的做法。我建议您为每张卡片使用相同的类，因为从我所见，它将具有相同的样式。这将使您的 css 更清晰（必须设置 1 个类而不是许多 id 的样式），并且从长远来看有助于避免混淆。

希望这会有所帮助！