CSS 居中问题

来源：互联网发布：etc linux 缩写编辑：程序博客网时间：2024/06/08 11:00

CSS中不同情况下居中问题的解决方法

水平居中设置—行内元素

text-align:center;

水平居中设置——定宽块状元素（width固定）

margin:＊ auto;

水平居中设置——不定宽块状元素（width不固定）

1.加入table标签

2.设置display:inline;转换为行内元素，再使用行内元素居中设置的办法text-align:center;

3.设置position:relative和left:50%,即达到居中目的

<style type="text/css">table{border: 1px solid;margin: 0 auto;}</style><div><table><tbody><tr><td><ul><li>First Line</li><li>Second Line</li><li>Third Line</li></ul></td></tr></tbody></table></div></span>

居中一个浮动元素

div{width: 500px;height:300px;//高度可以不设margin: -150px 0 0 -250px;//-250px是控制居中的，width的一半position: relative;left: 50%;}

垂直居中设置——父元素高度确定的单行文本

height:100px;line-height:100px;

垂直居中设置——父元素高度确定的多行文本

使用插入table（包括tbody、tr、td）标签，同时设置vertical-align:middle;

<style type="text/css">.wrap{height: 300px;vertical-align: middle;border: 1px solid black;}</style><table><tbody><tr><td class="wrap"><div><p>看我是否可以居中</p><p>看我是否可以居中</p><p>看我是否可以居中</p><p>看我是否可以居中</p></div></td></tr></tbody></table>

隐性改变display类型

当为元素（不论之前是什么类型的元素，display:none除外）设置一下两句之一

1.position:absolute;

2.float:left或float:right

只要html代码出现以上两句之一，元素的display显示类型就会自动变为display:inline-block（块状元素）的方式显示

1 0