Rumah  >  Artikel  >  hujung hadapan web  >  CSS进阶之CSS的技巧分享

CSS进阶之CSS的技巧分享

高洛峰
高洛峰asal
2017-03-23 11:28:421286semak imbas

如何设置水平居中?

分两种情况 行内元素与块级元素

    1.行内元素(如图片 文字)

   div.textcenter{
   text-align:center;
   }
   <div class="textcenter">hello joe!</div>

    2.块级元素

    块级元素的水平居中又分为两种 定宽块状元素 和 非定宽块状元素

    

    定宽块状元素(即块状元素的width值是定值):

    可以通过块级元素的左右margin为auto来实现中 如下

   div{
   border:1px solid red;
   width:500px;/*定宽*/
   margin:30px auto;/*margin-right margin-left为auto*/
   }
   <div>I am middle placed.</div>

    不定宽块状元素(即宽度width不确定 比如网页上的分页导航)

    对于不定宽元素实现水平居中有三种方法(常用):

    第一种方法:利用table标签

    利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其     内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方       法,使其水平居中

第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 92cee25da80fac49f6fb6eec5fd2c22a、a34de1251f0d9fe1e645927f19a896e8、b6c5a531a458a2e790c1fd6421739d1c )。

第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

   table{
   margin: 0 auto;
   }
   ul{list-style:none;/*将小圆点去掉*/}
   li{float:left;display:inline;margin-right:5px;}
   <table>
       <tbody>
           <tr> <td>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                 <li><a href="#">3</a></li>
                 <li><a href="#">4</a></li>
             <ul>
            </td></tr>
       </tbody>
   </table>

 第二种方法:改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果。如下例子:

   .container{
   text-align:center;
   }
   .container ul{
   display:inine;
   list-style:none;
   padding:0;
   margin:0;
   }
   .container li{
   display:inline;
   margin-right:8px;
   }

    与第一种方法相比不用添加无语义标签(table)但是由于li被视作行内元素,所以无法为其设定height,width等属性

    第三种方法:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

   .container{
   float:left;
   position:relative;
   left:50%;
   }
   .container ul{
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:-50%;
   }
   .container li{
   float:left;
   display:inline;
   margin-right:8px;
   }
   <div class="container">
     <ul>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
     </ul>
   </div>

2.如何设置垂直居中?

分为两种情况,父元素高度确定的单行文本,父元素高度确定的多行文本。

单行文本:通过设置line-height 与 height一致实现垂直居中

line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。

.container{
    line-height:100px;
    height:100px;
    background:purple;
}
<div class="container"><h1>Hello World!</div>

CSS进阶之CSS的技巧分享

但是该方法有一个弊端:当文字的长度长于块的宽度的时候,内容就脱离了块。

多行文本:

有两种方法:

使用table标签 使用vertical-align:middle(注意td标签默认就设置了vertical-align:middle

所以不需要我们手动设置。

table td{
height:500px;
background:#purple;
}
<table>
    <tbody>
    <tr><td>
    <div>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    </div>
    </tr></tr>
    </tbody>
</table>

CSS进阶之CSS的技巧分享

最后一个技巧

隐式的改变display的属性 当为元素设置以下两个语句之一的话:

float:right 或者float:right

position:absolute

元素的display类型就会自动变为display:inline-block 此时就可以设置元素的宽和高了例如

<style type="text/css">
.container a{
    position:absolute;
    width:100px;
    height:50px;
    background:purple;
}
</style>
<body>
    <div class="container">
      <a href="#">
          I am CEO,you son of bitch.
      </a>
    </div>
</body>

CSS进阶之CSS的技巧分享

Atas ialah kandungan terperinci CSS进阶之CSS的技巧分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn