Vertical align text in block element

Question

I know vertical alignment is always asked about, but I don\'t seem to be able to find a solution for this particular example. I\'d like the text centered within the element,

Answer 1

You can try the display:inline-block and :after.Like this:

HTML

    
I would like this text centered vertically

CSS

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: inline-block;
    vertical-align: middle;
    background: red;  
}
li a:after {
  content:"";
  display: inline-block;
  width: 1px solid transparent;
  height: 100%;
  vertical-align: middle;
}

Please view the demo.