文本未對齊到卡片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; 
}

來源

2017-08-15 Batman

<cardheader>不是一個有效的HTML標記。我已經改變了你的代碼是一個<div>與該cardheader類：

無效：

<cardheader>Option 1</cardheader>

所以將其更改爲：

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

而且在CSS，改變cardheader到.cardheader

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

來源

2017-08-15 12:26:11 skyline3000

如何將我的CSS轉換爲類而不是IDS – Batman

您只需要更改上面指出的最新規則的選擇器以及更新後的JSFiddle。如果要將其他ID更改爲類，只需將標記的HTML屬性從'id =「」'更改爲'class =「」'，然後在CSS中將英鎊符號'＃'更改爲句號'.' – skyline3000

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

這裏是一個更新小提琴：jsFiddle

關於你的問題，如果這是一個很好的做法。我建議你爲每張卡使用相同的類，因爲它與我所能看到的樣式相同。這將使你的CSS更清晰（不得不風格1類而不是許多ID），並且從長遠來看將有助於避免混淆。

希望這會有所幫助！

來源

2017-08-15 12:21:04

其實我只想使中心文本對齊的cardheader。其他部分應該左對齊在卡內 – Batman

@Batman我已經更新了我的小提琴和答案。希望這可以幫助！ –

將display:block;添加到cardheader可解決文本對齊問題。

來源

2017-08-15 12:23:02 kinggs

這解決了這個問題，但''不是有效的標記，不應該在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中的中心

回答

相關問題