利用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: ...
随机推荐
- UVALive - 3523 - Knights of the Round Table
Problem UVALive - 3523 - Knights of the Round Table Time Limit: 4500 mSec Problem Description Input ...
- js 批量替换
html = html.replace(new RegExp(title,"gm"), "<span style='color:red;'>"+ti ...
- 微信小程序 初步认识一（微信运动步数）
1.注册微信小程序 2.安装小程序开发工具 3.实例(显示微信运动步数) 4.后端处理(c#) 一 注册微信小程序 注册地址:https://mp.weixin.qq.com/cgi-bin/regi ...
- nginx 配置文件的结构
1.nginx.conf的主要部分 events { } http { server { location path { ... } location path { ... } } server { ...
- .net后台以post方式调用http接口[转]
string strResult = ""; try { HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create( ...
- Go 连接 mysql 数据库的简单测试.
1. import 的时候 总是很慢 容易失败 所以 优先导入几个必须要的包 go get github.com/go-sql-driver/mysql 安装完之后 会在gopath 目录下发现相关的 ...
- sublime 官方正版，自己用的插件配置，最轻量级安装流程
到了一家新公司,新的办公电脑,移动工作站哦,配置很酷.需要自己安装编码环境,node.js(http-server)是必须要装的,编辑器个人比较喜欢sublime,现在归纳一下配置流程,ps:本人有点 ...
- Sqoop export（Hive to MySQL） 的一些 reference
之后可能会整理成文章..还有一些坑没趟完. Reference: https://cloud.tencent.com/developer/article/1078473 Sqoop抽取Hive Pa ...
- 前端js区域上下拖拽
先说说需求吧,网页内又上下两个区域,需要做到的功能是,第一个区域A底部的边可以进行拖拽使得区域变大或变小,同时第二个区域B跟着拖动的变化进行自适应. 思路: 1.使用一个假的div定义为那条可进行拖拽 ...
- shell之获取终端信息
#!/bin/bash #tput和stty是两款终端处理工具 #获取列数和行数 tput cols tput lines #打印当前终端名 tput longname #移动光标 移动光标到100 ...