Text is not aligning to Center in the Card UI

Question

I have below HTML and CSS and I want to make to text align to middle(which is present in cardheader element) of the Card Element . But its not working can you please check what is wrong.

And also please suggest me is it good practice to have CSS as 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;
}

Answer 1

<cardheader> is not a valid HTML tag. I've changed your code to be a <div> with a class for the cardheader:

Not valid:

<cardheader>Option 1</cardheader>

So change it to:

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

And in CSS, change cardheader to .cardheader

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