Question

css 如何让文字在图片垂直居中

css文件有一项

.tt{
background-image:url(../images/index-title-rkjd.gif);

height:30px;
color : blue;
font-family : Courier New;
font-size : 13pt;

}
现在文字贴在图片上方，如何让文字垂直在图片当中呢，
分成两个定义也行，
如
.tt{
background-image:url(../images/index-title-rkjd.gif);

height:30px;

}
.ta{
color : blue;
font-family : Courier New;
font-size : 13pt;
}
该怎么写
现在我调用是<div class="tt">好啊好啊</div>

Answer 1

设置行高就可以了,行高值是根据你的高度来设的,如果你的高度是20px;那么就设行高line-height:20px;文字就上下居中了;你现在高度是30px那么就设line-height:30px;

.tt{
background-image:url(../images/index-title-rkjd.gif);
line-height:30px;
height:30px;
color : blue;
font-family : Courier New;
font-size : 13pt;

}

Answer 2

<div class="tt" valign="center">好啊好啊</div>

Answer 3

1、设定为背景图片，设定好高度，设定line-height
<div class="jz">xxxx</div>
.jz{ background:url(xxx.jpg) no-repeat; height:50px; line-height:50px;}/*缺点只能单行文本*/
2、使用表格的vertail-align:middle;或者td自带的属性align="center"
<table class="tb">
<tr><td height="200" align="center">1111<br>2222</td></tr>

</table>
.tb td{ vertail-align:middle;}

Answer 4

设置行高跟层的高度一样，就行了、

Answer 5

<div style="height:300px; width:450px; line-height:300px; background:url(https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif) no-repeat center; text-align:center; border:1px solid #FF0000">我是一个兵</div>

实现这个关键的两步：一、背景居中，二、容器的行高和高度要相同