温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(67886)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'如何让div中的内容垂直居中',
blogAbstract:'虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项，不过好在千变万化的CSS可以灵活运用，可以制作出准垂直居中效果，勉强过关。 要让div中的内容垂直居中，无非有以下几种方法，等我一一列举：
一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
p { height:30 line-height:30 width:100 overflow: }这段代码可以达到让文字在段落中垂直居中的效果。
二、内边距（padding）法另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:4,
permalink:'blog/static/',
commentCount:6,
mainCommentCount:3,
recommendCount:5,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}　　有时候，为了网页设计的美观，需要把div+css设计的页面里的某些div层里的文字垂直居中，包括多行文字以及单行文字；方法有不少，但真正能实现而代码又简洁的介绍不多，flymorn就为大家介绍几种适用的div文字垂直居中的方法。
& &&&首先要知道css里vertical-align无效，W3C官方对vertical-align做了下面的解释： &&This&property&affects&the&vertical&positioning&inside&a&line&box&of&the&boxes&generated&by&an&inline-level&element.&&&&&&& &&&实际上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。前面定义了一个60px的高度，但是这个Box中存在很多行，那段文本并不能对齐到中央。因此希望那段文本对齐中间，需要给它定义一个line-height的属性，让line-height为60px，作用于一行的vertical-align就可以工作了。& &&
&&&&如果是单行文字想垂直居中，只要保证div高和行高保持一致，就可以了。用下面的代码即可实现：
line-height:60
XHTML代码：
&div id="div-a"&
　　如果还想让div里的文字水平居中，加上&text-align:&即可；代码如下：
text-align:
line-height:60
XHTML代码：
&div id="div-a"&
　　说明：如果在父级元素定义TEXT-ALIGN:这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上&MARGIN-RIGHT: MARGIN-LEFT:&。
　　但是，如果是多行文字，上面的垂直居中的方法就不行了，得用变通的方法实现；这里建议使用table方法，在table外面再套上相应的div，
代码如下：
&tr&&td style="vertical-align:height:300background-color:red"&
&/td&&/tr&
&　　多行文字居中还有另外一种方法：
多行内容居中，且容器高度可变，也很简单，给出一致的&padding-bottom&和&padding-top&就行：
.middle-demo-2
padding-top: 24
padding-bottom: 24
优点：1.&同时支持块级和内联极元素2.&支持非文本内容3.&支持所有浏览器
&缺点：&容器不能固定高度
如何使图片在DIV中垂直居中，可以用背景的方法。如下：
BACKGROUND:url(http://www.piaoyi.org/images/logo.gif) #FFF no-
关键就是最后的center,这个参数定义图片的位置。还可以写成&top& left&(左上角)或者"bottom&right"等，也可以直接写数值"50&30"。
阅读(...) 评论()