How to align in height?

Example https://jsfiddle.net/9g4j32mp/
I want X and Y to align centrally within the block. Read about the property vertical-align seems to do the right thing.
1) is Applied to the element and not to the block in which it
2) the Element must be a string or simulate the string (here just the inline-block)
But something I miss...

HTML
<div class="buttons">
 <div class="butt">
 <i class="va">X</i>
</div>
 <div class="butt">
 <i class="va">Y</i>
</div>
 </div>


CSS
.butt{
 display: inline-block;
 width: 4rem;
 height: 4rem;
 border: 1px solid green;
 border-radius: 0.2 rem;
 text-align: center;
}

.va{
 display: inline-block;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 vertical-align: middle;
}
June 14th 19 at 21:04
5 answers
June 14th 19 at 21:06
Solution
Can so.

Or so.
But, this thing only works when the height of the block specified? In the first case, line-height forgot - ines_Sta commented on June 14th 19 at 21:09
June 14th 19 at 21:08
Solution
It I a shame some generated by:
<div style="display:table;">
 <div style="display:table-cell;vertical-align:middle;">
 <div style="text-align:center;height:15px;font-size:15px;">Text Content</div>
</div>
</div>
- ines_Sta commented on June 14th 19 at 21:11
all right , depending on the supported browsers are shown how to organize a wrap around that is necessary to align

What's your question? - ines_Sta commented on June 14th 19 at 21:14
June 14th 19 at 21:10
Solution
June 14th 19 at 21:12
Solution
https://jsfiddle.net/qgkfc0fe/

added before from .butt
Not bad, but surprising too )) - ines_Sta commented on June 14th 19 at 21:15
June 14th 19 at 21:14
Solution
The easiest way is the class butt to put line-height: 4rem; (t e) is Equal to the height of the block

A little more complicated: .butt do relative .va absolute, do top, left at -50% and transforam: translate(-50%,-50%)

Find more questions by tags CSS