标签:小技巧 间隔 否则 nbsp splay .com padding play blog
一、行内元素-水平居中
在父元素的样式中添加:
text-align:center;
二、定宽块级元素-水平居中
所谓定宽块级元素指块级元素的宽度指定,而不是默认的100%,否则此方法无效;
代码:
html: <body> <div>我是定宽块状元素,哈哈,我要水平居中显示。</div> </body> css: <style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>
三、不定宽块级元素-水平居中
三种思路:
html: <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> css: <style> .container{ text-align:center; } /* margin:0;padding:0(消除文本与div边框之间的间隙)*/ .container ul{ list-style:none; margin:0; padding:0; display:inline; } /* margin-right:8px(设置li文本之间的间隔)*/ .container li{ margin-right:8px; display:inline; } </style>
以上是例子代码。
标签:小技巧 间隔 否则 nbsp splay .com padding play blog
原文地址:http://www.cnblogs.com/cc-freiheit/p/7498585.html