DIV+CSS是现在网页设计中越来越流行的一种网页标准,前台的设计越来越抛弃了TABLE的设计应用,现在前台美工如果不懂DIV+CSS可以说真的有点落伍了,今天我们要讲的是如何让div内容居中(文字或图片),下面分几个部分来讲。
一、让div文字居中
如果要让DIV中的文字居中,就得用到文字对齐方式代码text-align:center,这个居中默认为水平居中,详细代码写法如下:
div { border:1px solid red; text-align:center; }
如果要DIV中的文字垂直居中,你就必须要用到文本高度这个属性(line-height),这样文字才能垂直居中,代码如下:
div { border:1px solid red; line-height:55px; }
二、让div图片居中
如果我们要让DIV中的图片居中,用普通的方法无法实现,用"vertical-align:middle;"和用img的align="absmiddle"都失效,通过测试,这里得用到vertical-align:middle和font-size:**px这两个属性设置,代码举例如下:
.s{ height:100px; font-size:87.5px; border:1px #FF0000 solid; } .s img{ vertical-align:middle; } <div class="s"> <img src="http://www.xue51.com/logo.jpg" /> </div>
这里特别说明:font-size:87.5px;这个是关键,必须设置height高度的87.5%,例如:height:50,那么font-size:44,如果这个设置好图片居中设置会无效的哦。
……