CODEWITHSUNDEEP
htmlcss
busterroni
busterroni

Reputation: 663

Getting text to line up in center of div squares

I'm working on adding text to a disappearing/appearing square system written with HTML and CSS. Would there be a simple way to go about adding a paragraph tag to the center of each square? Here's my code: jsfiddle.net/busterroni/wBcWc/8/

Upvotes: 1

Views: 1854

Answers (1)

Daniel Imms
Daniel Imms

Reputation: 50189

You would be better off not using a <p> tag as they include default margins. You can use a plain <span> with a class easier. Use line-height:100px (same as height) and text-align:center; to center the text horizontally and 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;
}

Upvotes: 3

Related Questions