html居中

div样式在IE下margin:0 auto不居中多种解决方法

由 a 夏天 提交于 2019-12-03 14:26:32
正常情况下需要将div居中显示时，使用Css样式:margin:0 auto即可，但有时使用margin:0 auto后在FF、Chrome里能居中，而在IE678里不居中的现象。 正常情况下需要将div居中显示时，使用Css样式: margin:0 auto 即可，但有时使用margin:0 auto后在FF、Chrome里能居中，而在IE678里不居中的现象。 如下代码: XML/HTML Code 复制内容到剪贴板 < style type = "text/css" > #con{width:980px;martin:0 auto;} </ style > < div id = "con" > margin: 0 auto 内容居中显示 </ div > 解决方法一 可以是对网页主体<body>声明文本居中，即body{text-align:center} 即: XML/HTML Code 复制内容到剪贴板 < style type = "text/css" > body{text-align:center} #con{width:980px;martin:0 auto;} </ style > < div id = "con" > margin: 0 auto 内容居中显示 </ div > 解决方法二 其实和解决方法一差不多，只是在要居中的div外层添加多一个div

[分享] 纯CSS完美实现垂直水平居中的6种方式

由 对着背影说爱祢 提交于 2019-12-03 14:26:07
前言 由于HTML语言的定位问题，在网页中实现居中也不是如word中那么简单，尤其在内容样式多变，内容宽高不定的情况下，要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多，但是都不太完整，所以小茄今天就来总结下纯CSS实现居中的各种方案。学疏才浅，文中如有不当之处，万望指出！ 6种方案 1、绝对定位+margin：auto <style type="text/css"> .wrp { background-color: #b9b9b9; width: 240px; height: 160px; } .box { color: white; background-color: #3e8e41; width: 200px; height: 120px; overflow: auto; } .wrp1 { position: relative; } .box1 { margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } </style> <div class="wrp wrp1"> <div class="box box1"> <h3>完全居中层1：</h3> <h3>开发工具 【 WeX5 】： 高性能轻架构、开源免费、跨端、可视化</h3> </div> </div> 效果：

css实现水平居中和垂直居中及其浏览器兼容性

由 a 夏天 提交于 2019-12-03 14:25:44
不管是在网站的布局还是显示图片，需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明：本文涉及到的浏览器及其版本如下（下文涉及到没有写版本号的均以此为准）： IE7 IE8 标准版 IE9 标准版 FireFox 13.01 Chrome 20.0.1132.47 Safari 5.1.7(7534.57.2) Opera 12 居中元素：分为图片(img)和非图片(div)两种，若要亲自检测请将图片的src改成一个可用链接进行，写此文时用#号替换掉了。 一、水平居中 1. text-align :center 代码如下： <!DOCTYPE> <html > <head> <title>居中测试</title> <style type="text/css"> .container{ width:200px; height:120px; border:1px solid Green;} .box{ width:120px; height:90px; border:1px solid Green;} .h-align{ text-align :center;} </style> </head> <body> <div class="container h-align"> <div class=

主流 CSS 布局(水平居中、垂直居中、居中 )

由 99封情书 提交于 2019-12-03 05:10:43
什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局（ 水平 + 垂直 ） 什么是水平居中布局 水平居中布局 元素相对于页面/元素相对于父元素水平居中 [ 实现方式 ] inline-block + text-align 属性配合使用 注：[优点] 浏览器兼容性比较好 [缺点] text-align 属性具有继承性 导致子级元素的文本居中显示 解决方法：在子级元素重新设置 text-align 属性覆盖掉父级元素的 text-align 属性 <style> *{ margin: 0; padding: 0; } .parent { width: 100%; height: 200px; background-color: #00ffff; /* 方法一： inline-block + text-align 属性配合使用 为父元素 添加 text-align 属性 为子元素添加 display 属性 - text-align 属性 为文本内容设置对其方式 + left: 左对齐 + center: 居中对齐 + right: 右对齐 */ text-align: center; } .child { width: 300px; height: 200px; background-color:

前端实现水平竖直居中显示

由 半城伤御伤魂 提交于 2019-12-03 01:31:12
我首先在body中创建一个div，id名为“mydiv”，class名为“center”，在mydiv样式中，我给div设置了宽度为100%，即为body的宽度，高度我随便设置了一下（实际开发中，很多情况下高度是不固定的）。然后center样式中添加了如下这三句话，即可使div中元素上下左右都居中。 align-items:center; display: -webkit-flex; justify-content:center; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #mydiv { width: 100%; height: 580px; background-color: #2ca1f4; color: white; font-size: 50px; } .center { align-items:center; display: -webkit-flex; justify-content:center; } </style> </head> <body> <div id="mydiv" class="center"> 哈哈哈哈 </div> </body> </html> 　　 原文链接： https://blog.csdn.net

元素水平垂直居中

由 匿名 (未验证) 提交于 2019-12-03 00:13:02
一、水平垂直居中 方法1： 当前div的宽度和高度不确定，通过绝对定位，使用 translate(-50%,-50%)：元素向左和向下平移自身长宽的50% HTML 1 <div id="father"> 2 <div id="son"> 3 sssssssssssssssssssssssssssssssss 4 sssssssssssssssssssssssssssssssss 5 sssssssssssssssssssssssssssssssss 6 </div> 7 </div> CSS 1 #father{ 2 position:relative; 3 width:400px; 4 height:400px; 5 border:1px solid red; 6 } 7 #son{ 8 background:red; 9 position: absolute; 10 left:50%; 11 top:50%; 12 transform: translate(-50%, -50%); 13 } 效果图 方法2： 使用绝对定位，子div长宽确定，通过设置margin值实现居中 HTML 1 <div id="father2"> 2 <div id="son2"> 3 </div> 4 </div> CSS 1 #father2 2 { 3 position:relative; 4

hmtl div水平、垂直居中

由 匿名 (未验证) 提交于 2019-12-02 23:03:14
最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。 水平居中直接加上<center>标签即可，或者设置margin:auto;当然也可以用下面的方法 下面说两种在屏幕正中（水平居中+垂直居中）的方法 放上示范的html代码： <body> <div class="main"> <h1>MAIN</h1> </div> </body> 方法一： div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。 .main{ text-align: center; /*让div内部文字居中*/ background-color: #fff; border-radius: 20px; width: 300px; height: 350px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } --------------------- 作者：qq_32623363 来源：CSDN 原文：https://blog.csdn.net/qq_32623363/article/details/77101971 版权声明：本文为博主原创文章，转载请附上博文链接！

HTML+CSS编写五环居中案例

由 匿名 (未验证) 提交于 2019-12-02 20:32:16
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css.css"> <title>Document</title> </head> <body> <div class="plat"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> <div class="circle5"></div> </div> </body> </html> css代码如下 * { margin: 0; padding: 0; } .plat { position: absolute; left: 50%; top: 50%; margin-left: -190px; margin-top: -93px; height: 186px; width:
订阅 html居中