html - Text is not aligning to Center in the Card UI -


i have below html , css , want make text align middle(which present in cardheader element) of card element . not working can please check wrong.

and please suggest me practice have css below

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; } 

<cardheader> not valid html tag. i've changed code <div> class cardheader:

not valid:

<cardheader>option 1</cardheader> 

so change to:

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

and in css, change cardheader .cardheader

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


Comments

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -