獲取文本排列在正方形的中心

Question

我正在爲使用HTML和CSS編寫的消失/出現的方形系統添加文本。是否有一個簡單的方法去添加一個段落標籤到每個廣場的中心？這裏是我的代碼： jsfiddle.net/busterroni/wBcWc/8/

Answer 1

你最好不要使用<p>標籤，因爲它們包含默認邊距。您可以使用簡單的簡單的<span>。使用line-height:100px（與height相同）和text-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; 
}