让文本排列在div正方形的中心

Question

我正在努力为使用HTML和CSS编写的消失/出现的方形系统添加文本。是否有一种简单的方法可以将段落标记添加到每个方块的中心？这是我的代码： jsfiddle.net/busterroni/wBcWc/8 /

Answer 1

最好不要使用<p>标记，因为它们包含默认边距。您可以更轻松地使用普通<span>。使用line-height:100px（与height相同）和文字 - align:center;可以水平和垂直居中文字。

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