カードのUIのテキストが中央に揃っていない

Question

私は以下のHTMLとCSSを持っており、カードの要素の中に（カードヘッダー要素にある）中間にテキストを揃えたいと考えています。しかし、それが動作していない場合、何が間違っているか確認してください。

も私を提案してください、それはあなたがしなければならないのは、ここにあなたの#cardheader ID

にdisplay: blockを追加で

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タグではありません。

有効ではありません：私はcardheaderのクラスで<div>なるようにコードを変更しました

<cardheader>Option 1</cardheader> 

だから、それを変更します。

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

そしてCSSで、への変更cardheader.cardheader

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

Answer 2

以下のようにCSSを持っていることをお勧めが更新されていますフィドル：jsFiddle

あなたの質問については、これが良い方法でしょうか。私はあなたが私が見ることができるものと同じスタイルを持つので、あなたは各カードに同じクラスを使用することをお勧めします。これは、あなたのCSSをきれいにします（多くのIDの代わりに1つのクラスをスタイルする必要があります）、そして長期的には混乱を避けるのに役立ちます。

希望すると便利です。

Answer 3

display:block;〜cardheaderを追加すると、テキストの配置の問題が解決されます。