html5 - Getting text to line up in center of div squares -

i'm working on adding text disappearing/appearing square system written html , css. there simple way go adding paragraph tag center of each square? here's code: jsfiddle.net/busterroni/wbcwc/8/

you better off not using <p> tag include default margins. can use plain <span> class easier. use line-height:100px (same height) , text-align:center; center text horizontally , vertically.

jsfiddle

html

<span class="wrapper">     <div class="rowone" class="a"><span class="hoverable">test</span></div>     ... 

css

div {     text-align:center;     line-height:100px; } .hoverable{    color:transparent;     } .hoverable:hover{     color:red;     text-align:center; }