码迷,mamicode.com
首页 > Web开发 > 详细

css居中小技巧

时间:2017-09-09 17:13:45      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:小技巧   间隔   否则   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>

 

三、不定宽块级元素-水平居中

  三种思路:

  1. 加入 table 标签,将这个table居中;
  2. 设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置;
    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>

    以上是例子代码。

  3. 设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的;

css居中小技巧

标签:小技巧   间隔   否则   nbsp   splay   .com   padding   play   blog   

原文地址:http://www.cnblogs.com/cc-freiheit/p/7498585.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!