Question

我有HTML和CSS以下，我想让文本对齐卡元素的中间（存在于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

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

无效：

<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），并且有助于避免长期混淆。

希望这有帮助！

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

3 个答案: