本文收录css设置样式的一些小技巧

1. 设置文字在块级标签居中（包括水平居中和垂直居中）

水平居中

方法一：使用text-align

text-align:center

方法二：目标标签的父级标签设置position:relative，目标标签设置margin:auto

.parent {

        position: relative

}

.target {

        margin:auto

}

垂直居中

设置line-height与父级元素height相同

div {

    width:200px;

    height:40px;

    line-height:40px

}

2. 块级元素在其父级元素内部居中

方法：利用绝对定位

步骤：（1）设置父级元素的position: relative(absolute也可以)

（2）设置目标元素的margin值为auto

（3）设置目标元素的left与right值相同，top与bottom值相同

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>元素居中</title>

    <style>

        .box1 {

            width: 50%;

            height: 300px;

            position: relative;

            background-color: #71b639;

        }

        .box2 {

            width: 200px;

            height: 200px;

            background-color: #ed6962;

            /*只设置设置auto只能达到水平居中的效果*/

            /*margin: auto;*/

            position: absolute;

            margin: auto;

            /*这里不一定要设置为0，只要对应的值相同即可*/

            left: 0;

            right: 0;

            top: 500px;

            bottom: 500px;

        }

    </style>

</head>

<body>

<div class="box1">

    <div class="box2"></div>

</div>

</body>

</html>

效果

3. 表格内文字垂直居中

<style>

    .class {
　　　　vetical-align: middle
　　}

</style>

补充：vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式

top: 顶部对齐

middle: 居中对齐

bottom: 底部对齐

持续更新中...

css的几个小技巧的更多相关文章

  1. css选择器顺序的小技巧

    在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...

  2. CSS中的一下小技巧2之CSS3动画勾选运用

    使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...

  3. CSS中的一下小技巧1之CSS3三角形运用

    使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...

  4. 25条div+CSS编程提醒及小技巧整理

    1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次:对一个标签同时使用clas ...

  5. HTML+CSS - 前端设计的小技巧（持续更新......）

    2015年7月6日20:28:20 1.设置文字的居中,非控件内的. :text-alain:center 2.图片在ASP.NET中,可以直接拖放到界面,自动形成img控件. 3.CSS直接在全局样 ...

  6. CSS绘制三角的小技巧

    网页中常见一些三角形,使用css直接画出来就可以,不必做成图片或者字体图标当把一个盒子的高和宽的长度都设置为0,并且分别指定边框样式时,就会得到以下图形: 受此启发,可以知道三角是如何制作的(想要保留 ...

  7. 整理一些css在使用中的小技巧（进行中）

    1. 消除li排列display:inline-block的间隙 ul{ font-size:; } ul li{ display:inline-block; }

  8. css隐藏文字的小技巧

    前段时间,在做项目的时候,遇到一个问题.背景图片上有一个“立即注册”的按钮,需要点击.但是问题是:现在的图片是背景图片,如果图片是在html页面内的话,我们可以使用锚点来对图片添加链接.这个时候,我们 ...

  9. css和HTML布局小技巧

    一:水平居中 1. 如下所示,让child在parent中水平居中 <!DOCTYPE html> <html> <head lang="en"> ...

随机推荐

  1. linux中文件的时间戳

    touch命令 touch用来创建新文件,或者修改时间戳. linux中的文件有三个时间点,利用stat命令查看: 1.atime:最后访问时间:文件最后一次被存取或执行的时间. 2.mtime:最后 ...

  2. [luogu3628][bzoj1911][APIO2010]特别行动队【动态规划+斜率优化DP】

    题目描述 给你一个数列,让你将这个数列分成若干段,使其每一段的和的\(a \times sum^2 + b \times sum + c\)的总和最大. 分析 算是一道斜率优化的入门题. 首先肯定是考 ...

  3. Python之面向对象编程学习

    不知不觉,学到了python的面向对象编程思想.今天我们来讨论下面向对象编程的思想. 顾名思义,面向对象,就是面向于对象,这里所说的对象不是你现实生活中你的女朋友,你的老婆,你的爱人,在编程的世界里面 ...

  4. webpack入门（二）what is webpack

    webpack is a module bundler.webpack是一个模块打包工具,为了解决上篇一提到的各种模块加载或者转换的问题. webpack takes modules with dep ...

  5. maven将项目及第三方jar打成一个jar包

    pom.xml中添加如下配置 把依赖包和自己项目的文件打包如同一个jar包(这种方式对spring的项目不支持) <build> <plugins> <plugin> ...

  6. Manjaro下安装VirtualBox

    安装前需要知道 你需要知道你当前的内核版本 uname -r,比如输出了4.14.20-2-MANJARO那么你的内核版本为414 安装VirtualBox sudo pacman -S virtua ...

  7. 使用jquery.pjax实现SPA单页面应用

    前面文章介绍了前端路由简单实现和Pjax入门方面的文章,今天来分享一个单页面应用神器jquery.pjax.js. HTML 我们准备一个加载div#loading,默认隐藏,ajax请求的时候才显示 ...

  8. （七）修改上一条SQL语句，NULL值的滤空函数nvl

    修改上一条SQL语句 1.用c命令来修改(c 即 change ) 默认,光标闪烁位置指向上一条SQL语句的第一行.输入二则定位到第二行. c /错误的关键字/正确的关键字 SQL form emp; ...

  9. Command `bundle` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.

    呃呃,在写下面的代码时出现的问题,解决办法是npm install或者yarn,如果yarn报错,再npm install就可以了 下面的是携程App首页的样式,有轮播,我没有实现出来 代码如下: / ...

  10. JS验证身份证

    话不多说,直接看代码 JS部分 /** * 身份证15位编码规则:dddddd yymmdd xx p * dddddd:地区码 * yymmdd: 出生年月日 * xx: 顺序类编码,无法确定 * ...