一丶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中元素水平居中。的更多相关文章

  1. CSS中元素水平居中和垂直居中的方法

    #CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...

  2. div中元素水平居中的方法

    使用align属性 <div class="main" align="center">        <h1>MAIN</h1&g ...

  3. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  4. div中如何让文本元素、img元素水平居中且垂直居中

    一.文本元素在div中的水平居中且垂直居中方法 html代码 <div id="box"> <p>文本元素</p> </div> c ...

  5. css确定元素水平居中和垂直居中

    ---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...

  6. css中元素居中总结

    很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...

  7. CSS/CSS3 如何实现元素水平居中

    更新:可直接访问 [CSS/CSS3 如何实现元素水平居中] 查看效果,右键查看源代码 -------------------------------------------------分割线---- ...

  8. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  9. css点滴2—六种方式实现元素水平居中

    本文参考文章<六种方式实现元素水平居中> 元素水平居中的方法,最常见的莫过于给元素一个显式的宽度,然后加上margin的左右值为auto.这种方式给固定宽度的元素设置居中是最方便不过的.但 ...

随机推荐

  1. MySQL 忘记密码后的重置操作

    一.修改配置文件方式        1.关闭 MySQL                 linux:                        1)service mysqld stop     ...

  2. ShopEx访问提示Incompatible file format: The encoded file has format major ID 2, whereas the Loader expects 4

    今天测试了下ShopEx程序,但是ShopEx安装时(程序放在public_html目录下的test目录中)遇到了问题,提示错误如下:Fatal error: Incompatible file fo ...

  3. lazy loading img 图片延迟加载

    http://yunpan.cn/cVsjPW6dgbcsh (提取码:b5db)

  4. centos卸载自带的apache（httpd）

    .[root@localhost etc]# rpm -qa|grep httpd,查看与httpd相关软件包. httpd--.el5_2.CentOS. .然后删除httpd: [root@loc ...

  5. HTML&CSS基础学习笔记1.8-预格式文本

    <pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码 ...

  6. 移动端远程关闭PC端实现（一）需求设计

    公司有台半新不旧的电脑,因无甚大用,就拿来做了服务器,服务于民.服务器所提供的功能不是太多,无非是数据库以及svn服务. 公司每天下班会断电,我们吧会常常忘记关闭服务器,所以服务器非正常关机的次数约等 ...

  7. 对JAVA的static深刻理解（结合C语言的思考）

    public class statictest { String X = "我是非静态变量"; static int butterfly =0; static String sta ...

  8. LeetCode_Unique Paths

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  9. JavaScript Function 函数深入总结

    整理了JavaScript中函数Function的各种,感觉函数就是一大对象啊,各种知识点都能牵扯进来,不单单是 Function 这个本身原生的引用类型的各种用法,还包含执行环境,作用域,闭包,上下 ...

  10. 将Maven项目转换成Eclipse支持的Java项目

    当我们通过模版(比如最简单的maven-archetype-quikstart插件)生成了一个maven的项目结构时,如何将它转换成eclipse支持的java project呢? 1. 定位到mav ...