html居中

ul,li不能左右居中的问题

由 我是研究僧i 提交于 2020-01-13 15:00:03
近期帮朋友做一个他们公司的商品站点，用到了曾经学到的html+css技术，当然做站点少不了Javascript和jquery这些..... 这个功能主要实现了导航条里面的条目是居中的。所以声明了ul,li的样式，始终找不到错误，怎么也不能让当中的元素居中，以下就是这段代码： <html> <head> <style type="text/css"> body{ margin: 0; padding: 0; } .nav{ width: 100%; height: 300px; text-align: center; } /* 去除掉ul本身有的样式。也以前在这里面加text-align:cneter; */ .nav ul{margin:0px auto; padding:0px;} .nav ul li{list-style: none; float: left; margin: 0 20px 0 0; display: inline;} </style> </head> <body> <div class="nav"> <ul> <li>etmatch</li> <li>iphone</li> <li>ipad</li> <li>data</li> <li>line</li> </ul> </div> </body> </html> 我们看到本来设想的是

前端学习（316）：居中方法四flex

由 て烟熏妆下的殇ゞ 提交于 2020-01-07 01:36:51
<!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"> <title>居中</title> <style> body>div{width: 400px;height: 400px;background: yellow;margin-bottom: 20px;} div div{width: 200px;height: 200px;background: red;} body>div:nth-child(1){display: flex;} div:nth-child(1) div{margin: auto; } </style> </head> <body> <div> <div>1</div> </div> </body> </html> 运行结果 来源： CSDN 作者： 你知道歌谣吗？ 链接： https://blog.csdn.net/weixin_43392489/article/details/103837865

前端学习（317）：居中方法五flex

由 被刻印的时光 ゝ 提交于 2020-01-06 22:57:45
<!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"> <title>居中</title> <style> body>div{width: 400px;height: 400px;background: yellow;margin-bottom: 20px;} div div{width: 200px;height: 200px;background: red;} body>div:nth-child(1){display: flex;justify-content: center;align-items: center;} div:nth-child(1) div{ } </style> </head> <body> <div> <div>1</div> </div> </body> </html> 运行结果 来源： CSDN 作者： 你知道歌谣吗？ 链接： https://blog.csdn.net/weixin_43392489/article/details

前端学习（318）：居中方法六

由 99封情书 提交于 2020-01-06 22:03:42
<!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"> <title>居中</title> <style> body>div{width: 400px;height: 400px;background: yellow;margin-bottom: 20px;} div div{width: 200px;height: 200px;background: red;} body>div:nth-child(1){vertical-align: middle;display: table-cell;text-align: center;} div:nth-child(1) div{display: inline-block; } </style> </head> <body> <div> <div>1</div> </div> </body> </html> 运行结果 来源： CSDN 作者： 你知道歌谣吗？ 链接： https://blog.csdn.net/weixin

前端学习（319）：居中方法七

由 旧城冷巷雨未停 提交于 2020-01-06 20:05: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"> <title>居中</title> <style> body>div{width: 400px;height: 400px;background: yellow;margin-bottom: 20px;} div div{width: 200px;height: 200px;background: red;} body>div:nth-child(1){text-align: center;line-height: 400px;} div:nth-child(1) div{display: inline-block;vertical-align: middle;line-height: 200px; } </style> </head> <body> <div> <div>1</div> </div> </body> </html> 运行结果 来源： CSDN 作者： 你知道歌谣吗？ 链接： https:/

前端学习（320）：居中方法八

由 一笑奈何 提交于 2020-01-06 19:23:36
<!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"> <title>居中</title> <style> body>div{width: 400px;height: 400px;background: yellow;margin-bottom: 20px;} div div{width: 200px;height: 200px;background: red;} body>div:nth-child(1){text-align: center;} div:nth-child(1) div{display: inline-block;vertical-align: middle; } div:nth-child(1)::after{content: "";display: inline-block;vertical-align: middle;height: 100%;width: 0;} </style> </head> <body> <div> <div>1<

纯CSS实现垂直居中的几种方法

由 感情迁移 提交于 2020-01-03 14:04:42
垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。 方法1：table-cell html结构： 　　　　<div class = "box box1" > <span>垂直居中</span> 　　　　</div> css： 　　　　.box1{ 　　　　 display: table-cell; 　　　　 vertical-align: middle; 　　　　 text-align: center; 　　　　} 方法2：display:flex 　　　　 .box2{ 　　 display: flex; 　　 justify-content:center; 　　 align-items:Center; 　　　　} 方法3：绝对定位和负边距 　　　　.box3{position:relative;} 　　　　.box3 span{ 　　　　　　position: absolute; 　　　　　　width:100px; 　　　　　　height: 50px; 　　　　　　top:50%; 　　　　　　left:50%; 　　　　　　margin-left:-50px; 　　　　　　margin-top:-25px; 　　　　　　text-align

移动端中遇到的坑（bug）！！！

由 让人想犯罪 __ 提交于 2020-01-02 04:06:15
1.模拟单选点击的时候，在ios手机下，点击下面的内容选择，会出现页面闪一闪！！ 解决方案 ：样式重置html的时候加上这句 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 2. 在ios中如果给input框设置行高（使文字垂直居中）会导致在ios手机上看的时候，ios自带的光标，会显的很大。 解决方案 ：把行高去掉！！可以改为设置其padding值或者使用flexbox-middle来实现水平垂直居中，但是只用padding来实现水平垂直居中的时候，如果这时候里面的文字大小不一样也会导致不会水平垂直居中，所以在高兼容性的时候使用flexbox-middle布局来实现！！！ 3.当将标签设置为disable属性的时候，会有一个自带的浅灰色！！！ /*设置disable的颜色解决日期插件颜色问题*/ input:disabled, input[disabled]{ color:#fd734f; -webkit-text-fill-color:#fd734f; -webkit-opacity:1; opacity: 1; } 4. 在做弹窗的时候dialog，设置样式的时候，不要设置成fixed！！！！top值不要设置成百分比的形式，直接设置px单位！！！！！，设置%为单位的时候，表单输入在ios上，光标会一直往下跑，光标会出现问题！！！！

CSS垂直居中的11种实现方式

由 空扰寡人 提交于 2019-12-31 23:40:29
一、神奇的两个inline-block 很初级的问题，无聊决定写一个故事。 故事的主人公很简单，两个inline-block元素。代码如下，为了看起来简单明了，写得很简陋。效果图如右。发现有两个问题。 1：两个元素水平有空隙，简单的初始化margin：0好像并没有起想象中的作用，为什么呢 2：两个元素垂直也没有对齐，等高的的行内块元素不应该阿: 二、消除两个inline-block元素水平间距 最终效果 讲解demo <div class="space"> <a href="##">惆怅</a> <a href="##">淡定</a> <a href="##">热血</a> </div> 1.去空格 元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以： <div class="space"> <a href="##"> 惆怅</a><a href="##"> 淡定</a><a href="##"> 热血</a> </div> 或者是： <div class="space"> <a href="##">惆怅</a ><a href="##">淡定</a ><a href="##">热血</a> </div> 或者是借助HTML注释： <div class="space"> <a href

CSS中设置div垂直居中

由 Deadly 提交于 2019-12-29 00:04:18
在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。 Tips: 完美解决方案在文末！ 一、单行垂直居中 　　 如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。 1 2 3 4 5 6 7 如： div { height : 25px ; line-height : 25px ; overflow : hidden ; } 　　这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
订阅 html居中