HTML中元素水平居中。
一丶margin:0 auto;
试用最多的方法,简单实用。
二丶vertical-align:middle;
只适用于内嵌元素,比如说一个div中有一个图片和文字,要让图片和文字中线对齐。
<style type="text/css">
.fd{
width: 500px;
height: 200px;
}
img{
vertical-align:middle;
}
</style><div class="fd">
<img src="页面/images/1.png" alt=""/>
<span>关注前端,关注用户体验-冀</span>
</div>
三丶position:relative;
通过给父元素设置浮动float,再设置父元素的position属性为relative和left:50%;子元素设置position:relative和left:-50%来实现水平居中。这个好处是可以保留块级元素仍然是以display:block的形式显示,不会添加无意义的标签,不添加嵌套深度。确点是设置了position:relative;带来了一些副作用。下面是第三种方法的实例代码,放到body标签里面就可以了。
<div style=”width:400px;height:300px;background:#333;”>
<ul style=”margin:0 auto;float:left; position:relative; left:50%;list-style:none; padding:0;”>
<li style=”position:relative; left:-50%;float:left”>OKOKOKOKKOOKK</li>
</ul>
</div>
四丶margin-left;
通过margin的left来设置居中,需要多尝试参数值。
五丶padding-left;
通过padding的left来设置居中,需要多尝试参数值。
六丶text-align:center:
首先在父级元素定义text-align: center;这个的意思就是在父级元素内的文字内容居中;
七丶center(图片居中)
body{backgroud: url(“1.png”) #FFF no-repeat center;}
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"
八丶JS控制居中
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
<style type="text/css"></style>
</head>
<body>
<div style="border: solid; width: 100%; height: 100px">
说明:js根据页面大小变化设置div左右居中, 要应用js代码,要设置position:absolute
<p>关注前端,关注用户体验-冀</p>
</div>
<div id="fd"style="border: solid; background-color: red; width: 100px; position: absolute">
此为居中的div
</div>
<script type="text/javascript">
var fd = document.getElementById("fd");
var fd_resize = function() {
fd.style.left = (document.body.clientWidth - 100) / 2;//100为mydiv的宽度
fd.style.height = document.body.clientHeight / 2;
}
fd_resize();
window.onresize = fd_resize;
</script>
</body>
</html>
最新文章
- angularjs之filter过滤器
- 《征服 C 指针》笔记6:练习——挑战那些复杂的声明
- Windows Server 2008下asp+access无法登陆问题总结
- 管理IPv4网络连接
- Bootstrap插件的使用
- DEPENDENT SUBQUERY” 和 “SUBQUERY”
- Programming a Spider in Java 源码帖
- WindowsForm 增 删 查 改
- PHP从零单排(十八)图像处理
- nginx错误:unknown directive ";锘? in F:\nginx/conf/nginx.conf:3
- 一道变态的js题
- 把上传Github的代码添加Cocoapods支持
- Nmap绕过防火墙&;脚本的使用
- 获取客户端登录ip地址
- 使用getline输入一行字符串
- nginx获取上游真实IP(ngx_http_realip_module)
- 20.2.翻译系列:EF 6中基于代码的数据库迁移技术【EF 6 Code-First系列】
- Luogu P1966 火柴排队
- Java并发程序设计(五)JDK并发包之线程复用:线程池
- 配置Codeblocks
热门文章
- Json,Ajax(0516)
- 3月25日 javascript练习
- 仿校内textarea输入框字数限制效果
- java中把字节数组转换为16进制字符串
- iOS App 自定义 URL Scheme 设计(转自COCOACHINA)
- Effective Java Item3:Enforce the singleton property with a private constructor or an enum type
- 格式化用jad反编译混淆过的代码,能去大部分错误 (zhuanzai)
- cf C. Matrix
- usaco silver
- Linux企业级项目实践之网络爬虫(20)——扩展成为规则插件模式