css的一些属性

1 文字的水平居中

<style type="text/css"> 
        div 
        { 
            display:inline-block; 
            width:500px; 
            height:50px; 
            line-height:50px; 
            text-align:center;   /*实现div元素内文字水平居中*/ 
            border:1px dashed gray; 
        } 
    </style> 
</head> 
<body> 
    <div>CSS实现单行文字水平居中：text-align:center;</div>

2 块元素居中：
保证margin-left和margin-right都为auto,就可以保证块元素水平居中；如果要是使用margin:0:auto来实现块元素居中，就要
指定这个元素的宽度；

<style type="text/css"> 
        div 
        { 
            margin:0 auto; 
           width:80%; 
            height:100px; 
            border:1px solid gray; 
        } 
    </style> 
</head>

3 行内元素：
使用text-align:center剧中；

<style type="text/css"> 
        div{text-align:center;} 
    </style> 
</head> 
<body> 
    <div><strong>strong元素</strong></div> 
    <div><span>span元素</span></div> 
    <div><a href="#">a元素</a></div>

4 INLINE-BLOCK元素的居中，比如图片

<style type="text/css"> 
        body{text-align:center;} 
        div 
        { 
            display:inline-block; 
            width:100px; 
            height:100px; 
            border:1px solid gray; 
        } 
    </style>

5 垂直居中
   1) 单行文字垂直居中：
    定义line-height和height属性值相等就可以

 <style type="text/css"> 
        div 
        { 
            height:100px; 
            line-height:100px; 
            border:1px solid gray; 
        } 
</style>

   2）多行文字
       如果父元素高度固定，文字可能是两行或者多行，则

 <style type="text/css"> 
        p 
        { 
            display:table-cell; 
            vertical-align:middle; 
            width:400px; 
            height:120px; 
            border:1px dashed gray; 
        } 
span{display:inline-block;} 
</style> 
</head> 
<body> 
<p> 
<span>飒飒奥奥撒撒撒撒所<br /> 
顶顶顶顶顶顶顶顶顶顶等等<br /> 
啊啊啊啊啊啊啊啊啊啊啊啊</span> 
</p>

猜你喜欢