如何让div内容居中（文字或图片）

2012/7/19 12:42:49作者：佚名来源：网络

移动端

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，如果这个设置好图片居中设置会无效的哦。

标签： DIV 居中

热门软件/ 推荐游戏/ 手机软件

资讯分类

Dreamweaver Flash DIV+CSS 编程其他

精品软件推荐

如何让div内容居中（文字或图片）

资讯分类

推荐教程

精品软件推荐