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

CSS进阶之CSS的技巧分享

高洛峰asal: 2017-03-23 11:28:421268semak 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

Artikel sebelumnya：使用css给未知宽高的元素添加背景图片方法Artikel seterusnya：使用CSS3仿微信聊天小气泡的实例介绍

Artikel berkaitan

Lihat lagi