利用div绘制细线居中
利用div配合css代码实现细线方式:
块级元素水平居中步骤:
- 设置宽度width
- 设置margin-left:auto;
- 设置margin-right:auto;
实现方法是,让其左右两边的外边距自动计算,达到水平居中的效果,因为块级元素默认占一整行的特性,所以需要设置width宽度才能实现
复合写法:margin:0 auto;第一个值为上下外边距0(因为值是0就是无,所以带不带单位都无所谓了),第二个值为左右外边距自动计算
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>div细线实现margin居中算法</title>
<style>
*{margin:0px;padding:0px;}
.fu_ji{height:200px;margin-top:99.5px;}
.xi_xian{height:1px;border-top:1px solid #ddd;}
</style>
</head>
<body>
<div class="fu_ji">
<div class="xi_xian"></div>
</div>
</body>
</html>
上面代码的计算例子:200 - 1 / 2,200 是父级元素高度,1 是居中元素的高度
margin居中算法:想要居中元素的 高度 减去父级元素的 高度 / 2
总结:
想要实现一个元素垂直居中,那么就必须得先知道 父级的高度 和 子级的高度 然后 父级高度 减去 子级高度 就排除了 子级元素自身在垂直方向所占的高度,然后 / 2 就得出了这个子元素应该距离顶部多少值了。
采用最新的 Flex 布局比这更加简单,可以说是必学的了,建议去学习。
利用div绘制细线居中的更多相关文章
- 利用eChart绘制网页图表
首先,最好的教程在这里:eCchart eChart所需JS: echarts.min.js china.js echarts.js 页面代码如下: 一.图表 <!DOCTYPE html> ...
- css+div上下左右自适应居中
主要记录自己日常积累的布局相关的东西,持续更新中. 1.登录框上下左右自适应居中 以前想要把登录表单始终放置在页面的中间,花了不少心思,一直以来用的解决方法都是用js,感觉有点麻烦不是很好,于是在网上 ...
- CSS实现DIV水平自适应居中
DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...
- 利用div实现遮罩层效果
利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...
- 如何让div上下左右都居中
在做登陆页面的话,需要login的div 上下左右都居中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- C#利用GDI+绘制旋转文字等效果
C#中利用GDI+绘制旋转文本的文字,网上有很多资料,基本都使用矩阵旋转的方式实现.但基本都只提及按点旋转,若要实现在矩形范围内旋转文本,资料较少.经过琢磨,可以将矩形内旋转转化为按点旋转,不过需要经 ...
- 利用PowerDesigner绘制PDM生成SQL Server数据库
PowerDesigner是个很强大的建模工具,可以利用它绘制各种图形,本文利用该工具绘制PDM,进而生成SQL Server数据库. 比如绘制一个简单的学生选课.教师授课管理系统的PDM: pk表示 ...
- 常用布局,div竖直居中
常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...
随机推荐
- SQL NULL 函数
SQL ISNULL().NVL().IFNULL() 和 COALESCE() 函数 请看下面的 "Products" 表: P_Id ProductName UnitPrice ...
- robot中简单的使用键盘按键,和对象无关
参考链接: https://blog.csdn.net/smallsmallmouse/article/details/78689675 1.在python中的代码 from selenium imp ...
- Windows10下安装Oracle 11g 64位的详细步骤
直接附上我整理后的Word版<Windows10下安装Oracle 11g 64位的详细步骤>下载地址,提取码:9vak. 参考文献: 1.Win10 64位系统下安装Oracle11g详 ...
- Mapreduce数据分析实例
数据包 百度网盘 链接:https://pan.baidu.com/s/1v9M3jNdT4vwsqup9N0mGOA提取码:hs9c 复制这段内容后打开百度网盘手机App,操作更方便哦 1. ...
- Linux Hung Task分析
关键词:khungtaskd.TASK_UNINTERRUPTIBLE.nvcsw.nivcsw.last_switch_count等等. 经常会遇到内核打印“INFO: task xxx:xxx b ...
- Django之自带的认证系统 auth模块
01-Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Dj ...
- 关于mysql中unique的插入Duplicate key
MySQL数据库中 如果在后台中不做判断是否unique的column是否存在的话,直接把数据操作给dao层再传给DB的话,就会报重复的唯一值.如果确实是不希望先取出判断unique的column是否 ...
- day03(变量,常量,输入输出,注释,基本数据类型,运算符)
一,复习 ''' 1.语言的分类 -- 机器语言:直接编写0,1指令,直接能被硬件执行 -- 汇编语言:编写助记符(与指令的对应关系),找到对应的指令直接交给硬件执行 -- 高级语言:编写人能识别的字 ...
- 家庭记账本小程序之框架设计(java web基础版一)
1.设计主页 main.jsp <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...
- mybatis 使用事务处理
mybatis默认开启事务 以前使用JDBC的时候,如果要开启事务,我们需要调用conn.setAutoCommit(false)方法来关闭自动提交,之后才能进行事务操作,否则每一次对数据库的操作都会 ...