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>
HTML中元素水平居中。的更多相关文章
- CSS中元素水平居中和垂直居中的方法
#CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...
- div中元素水平居中的方法
使用align属性 <div class="main" align="center"> <h1>MAIN</h1&g ...
- js实现未知宽高的元素在指定元素中垂直水平居中
js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...
- div中如何让文本元素、img元素水平居中且垂直居中
一.文本元素在div中的水平居中且垂直居中方法 html代码 <div id="box"> <p>文本元素</p> </div> c ...
- css确定元素水平居中和垂直居中
---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...
- css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...
- CSS/CSS3 如何实现元素水平居中
更新:可直接访问 [CSS/CSS3 如何实现元素水平居中] 查看效果,右键查看源代码 -------------------------------------------------分割线---- ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- css点滴2—六种方式实现元素水平居中
本文参考文章<六种方式实现元素水平居中> 元素水平居中的方法,最常见的莫过于给元素一个显式的宽度,然后加上margin的左右值为auto.这种方式给固定宽度的元素设置居中是最方便不过的.但 ...
随机推荐
- dede后台反应特别慢-转
找到织梦后台管理目录下的/templets/index_body.htm文件 将第25行至第35行部分js代码注释掉. 就这么简单
- linux内核学习之一：环境搭建--安装Debian7.3
本系列文章假设读者已对linux有一定的了解,其实学习linux内核不需要有很深的关于linux的知识,只需要了解以下内容:linux基础知识及基本shell命令:现代操作系统的基本概念:C语言和gc ...
- cf B. Berland Bingo
http://codeforces.com/contest/370/problem/B 题意:给你n个卡片,卡片上有m个不同的数字,这个游戏是随即的从袋子里面抽球,球上有数字1-100:如果第ith玩 ...
- JavsScript的基本特点
1.简单性Javascript是一种脚本语言,它采用小程序段的方式实现编程它同样也是一种解释性语言.2.动态性Javascript是动态的,它可以直接对用户或者客户输入做出相应,无须经过Web服务程序 ...
- IDEA 快捷键整理
1. IDEA内存优化 \IntelliJ IDEA 9\bin\idea.exe.vmoptions ----------------------------------------- -Xms6 ...
- BOT、BT、PPP形式介绍(2)
BT1.什么是BT BT投资是BOT的一种变换形式,即Build-Transfer(建设—转让),政府通过特许协议,引入国外资金或民间资金进行专属于政府的基础设施建设,基础设施建设完工后,该项 ...
- SWF加解密资源索引之加密混淆篇【转】
============================ SWF加解密资源索引之加密混淆篇 ============================ [心得] swf加密混淆器(带源码) http:/ ...
- PHP常见报错解析
{错误类型}: {错误原因} in {错误文件} on {错误行数} 说明了在哪个文件的哪一行中因何种原因出现了何种错误. 常见的错误类型一般有下面几种: Parse error(解析错误)一般都伴随 ...
- log4net 快速上手使用
*本随笔仅限快速上手,如需深入探究,可查阅其它博友. 一.下载log4net.dll并添加引用; 二.添加配置文件 log4net.xml : <?xml version="1.0&q ...
- Unity 单元测试(PLUnitTest工具)
代码测试的由来 上几个星期上面分配给我一个装备系统,我经过了几个星期的战斗写完90%的代码. 后来策划告诉我需求有一定的改动,我就随着策划的意思修改了代码. 但是测试(Xu)告诉我装备系统很多功能都用 ...