使文本在div正方形的中心排成一行 [英] Getting text to line up in center of div squares

问题描述

我正在为使用HTML和CSS编写的消失/出现的方形系统添加文本。有没有一个简单的方法去向每个广场的中心添加段落标签？这里是我的代码：
jsfiddle.net/busterroni/wBcWc/8 /

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/

推荐答案

a < p> 标记，因为它们包括默认边距。您可以使用简单的< span> 和类。使用 line-height：100px （与 height ）和text - align：center;

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
$ b

CSS

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

这篇关于使文本在div正方形的中心排成一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！