CSS设置小技巧

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS设置小技巧相关的知识,希望对你有一定的参考价值。

水平居中

对于元素的水平居中,有三种情况:

  1. 行内元素(文字、图片等):text-align: center;
  2. 定宽块状元素(有设置宽度的block元素):margin: 0 auto;
  3. 不定宽块状元素

对于不定宽块状元素,居中的方式有以下三种:

  1. 加入table标签
  2. 设置 display: inline;
  3. 设置 position: relative; 和 left: 50%;

加入table标签

第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

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

这种方法的优点是简单易用,缺点是增加了无语义标签,嵌套深度大。

设置display: inline;

改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果。

这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。

设置 position: relative; 和 left: 50%;

通过给父元素设置 float(作用:完全由子元素撑开大小),然后给父元素设置 position:relative 和 left:50%(下图中的container),子元素设置 position:relative 和 left:-50% (父元素的最左边贴紧页面的一半,所以子元素要回来一半)来实现水平居中。

技术分享

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>不定宽块状元素水平居中</title>
<style>
    .wrap {
        float: left;
        position: relative;
        left: 50%;
    }
    .wrap-center{
        background:#ccc;
        position: relative;
        left: -50%;
    }
</style>
</head>

<body>
    <div class="wrap">
        <div class="wrap-center">我们来学习一下这种方法。</div>
    </div>
</body>
</html>

这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。

 

垂直居中

对于父元素高度确定的单行文本,只需要将height和line-height设置为相同的值即可。

对于父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:

方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。(是middle不是center!!)

说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在行内元素和表格元素中才会生效。所以又要插入 table 标签了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>父元素高度确定的多行文本</title>
<style>
    .wrap {
        height: 300px;
        background: #ccc;
    }

</style>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <td class="wrap">
                    <div>
                        <p>看我是否可以居中。</p>
                        <p>看我是否可以居中。</p>
                        <p>看我是否可以居中。</p>
                        <p>看我是否可以居中。</p>
                        <p>看我是否可以居中。</p>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

    <table>
        <tbody>
            <tr>
                <td class="wrap">
                    <div>
                        <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    
</body>
</html>

效果如下:

技术分享

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

方法二:在 chrome、firefox 及 IE8 以上的浏览器下可以设置父元素的 display 为 table-cell,激活 vertical-align 属性。

我们可以通过 display: table-cell; 将父元素“变成”表格元素,这样就可以使用 vertical-align 属性了。

这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。另外将父元素“变成”表格元素会导致一种类似float的效果,所以必要时在最外层要再多套一个div。

 

inline-block的对齐问题

技术分享

之前在做IFE的一个小练习,在做一个输入框和按钮的时候,发现按钮始终不能贴紧父元素上边(如上图空隙),纠结了很久之后发现原来button标签自带 display: inline-block 属性。

inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。可以通过vertical-align属性设置这个默认基线,将其设置为 vertical-align: top; 之后,即可贴紧上边。

 

以上是关于CSS设置小技巧的主要内容,如果未能解决你的问题,请参考以下文章

Android课程---Android Studio使用小技巧:提取方法代码片段

css设置背景小技巧

VS中添加自定义代码片段——偷懒小技巧

提效小技巧——记录那些不常用的代码片段

CSS设置小技巧

前端知识 | CSS小技巧-自适应椭圆