手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS垂直居中和水平居中方法总结
CSS垂直居中和水平居中方法总结
摘要:1、单行垂直居中文字在层中垂直居中vertical-align属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与lin...

1、单行垂直居中

文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!

div/div

2、层水平居中

设置div的宽度小于父div的宽度,设置 margin:0 auto;,即可让div居中。

#parentdiv

{

width: 500px;

}

#childdiv {

width: 200px;

margin:0 auto;

}

3、层中的文字水平居中

在childdiv的css加上text-align:center;

#parentdiv

{

width: 500px;

}

#childdiv {

width: 200px;

margin:0 auto;

text-align:center;

}

4、div层垂直居中

div

div

div

div

/div

/div

5、div层垂直水平居中,英文超长换行

div

div

div

div

div

/div

/div

6、div垂直滚动

div

7、垂直居中和使用text-align水平居中

div

div

div

div

div

div

设计之家设计之家设计之家设计之家设计之家设计之家设计之家设计之家

/div

/div

8、垂直居中和使用margin水平居中

div

div

div

div

div

/div

/div

【CSS垂直居中和水平居中方法总结】相关文章:

CSS图片垂直居中方法整理集合

CSS表单元素垂直居中完美解决方案

CSS实现同一行的图片和文字垂直居中对齐的方法

chrome居中但ie不居中的解决方法

图片垂直居中css写法兼容ie6

如何让图像域和文本输入框水平居中之类的实现代码

CSS控制ul缩进间距和去掉li点的方法

CSS制作水平垂直居中对齐 多种方式各有千秋

垂直三栏布局拥有相同高度的方法

css中不确定高度垂直居中2种方法

精品推荐
分类导航