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

问题描述：

我有HTML和CSS下面的文本，我想使文本与卡片元素的中间对齐（存在于cardheader元素中）。但它不起作用，请你检查一下有什么不对。文本未对齐到卡片UI中的中心

还请大家建议我是很好的做法，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; 
}

答

<cardheader>不是一个有效的HTML标记。我已经改变了你的代码是一个<div>与该cardheader类：

无效：

<cardheader>Option 1</cardheader>

所以将其更改为：

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

而且在CSS，改变cardheader到.cardheader

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

如何将我的CSS转换为类而不是IDS – Batman

您只需要更改上面指出的最新规则的选择器以及更新后的JSFiddle。如果要将其他ID更改为类，只需将标记的HTML属性从'id =“”'更改为'class =“”'，然后在CSS中将英镑符号'＃'更改为句号'.' – skyline3000

答

所有您需要做的就是添加display: block您#cardheader ID

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

关于你的问题，如果这是一个很好的做法。我建议你为每张卡使用相同的类，因为它与我所能看到的样式相同。这将使你的CSS更清晰（不得不风格1类而不是许多ID），并且从长远来看将有助于避免混淆。

希望这会有所帮助！

其实我只想使中心文本对齐的cardheader。其他部分应该左对齐在卡内 – Batman

@Batman我已经更新了我的小提琴和答案。希望这可以帮助！ –

答

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

这解决了这个问题，但''不是有效的标记，不应该在HTML中使用或作为CSS选择器。 – skyline3000

根据HTML5/HTML5.1规范，您可以在这里阅读：https：//www.w3.org/TR/html51/syntax.html#writing-html-documents-elements。（HTML5在2014年获得批准，此时您不应该使用任何旧内容。）如果要通过HTML验证服务运行此代码，您会看到错误“”元素cardheader不允许作为元素div的子元素“ – skyline3000

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

相关推荐