CSS样式设置
来源：互联网 发布：淘宝店简介怎么写 编辑：程序博客网 时间：2024/05/21 17:28
一：水平居中设置—行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
<head> <meta charset="UTF-8"> <title>水平居中设置---行内元素</title> <style> body { text-align: center; } p,img { border: 2px solid red; margin: 20; } </style></head><body><p>扫码关注公众号,及时获取更多文章</p><img src="https://mp.weixin.qq.com/mp/qrcode?scene=10000004&size=102&__biz=MzI1OTIwMzQ1Mw==&mid=2247483665&idx=1&sn=debb47d5c6a40282fb9ff880314b8465&send_time="></body>显示效果：
二： 水平居中设置—定宽块状元素
当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值)。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
<head> <meta charset="UTF-8"> <title>水平居中设置---定宽库块状元素</title> <style> p { border: 2px solid red; width: 120px; margin: 20px auto; } </style></head><body><p>Stevin三天三夜的专栏</p></body>显示效果：
三： 水平居中设置—不定宽块状元素方法（一：加入 table 标签）
利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
<head> <meta charset="UTF-8"> <title>水平居中总结-不定宽块状元素方法（一）</title> <style> table { margin: 0 auto; } </style></head><body><table> <tr> <td> <ul> <li>第一行文本</li> <li>第二行文本</li> <li>第三行文本</li> </ul> <p>哇哈哈哈,居中的段落</p> </td> </tr></table></body>显示效果：
四： 水平居中设置—不定宽块状元素方法（二：设置 display: inline 方法）
改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
<head> <meta charset="UTF-8"> <title>水平居中总结-不定宽块状元素方法（二）</title> <style> div { text-align: center; } li { display: inline; } </style></head><body><div> <ul> <li>111</li> <li>222</li> <li>333</li> </ul></div>显示效果：
五： 水平居中设置—不定宽块状元素方法（三：设置 position:relative 和 left:50%）
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
<head> <meta charset="UTF-8"> <title>水平居中总结-不定宽块状元素方法（三）</title> <style> .container { float: left; position: relative; left: 50% } .container ul { position: relative; left: -50%; } .container li { float: left; display: inline; margin-right: 8px; } </style></head><body><div class="container"> <ul> <li><a>111</a></li> <li><a>222</a></li> <li><a>333</a></li> </ul></div></body>显示效果：
六： 垂直居中—父元素高度确定的单行文本
比如文章标题在左右一侧时，常常会设置为垂直居中。这里分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
<head> <meta charset="UTF-8"> <title>垂直居中-父元素高度确定的单行文本</title> <style> h2 { height: 100px; line-height: 100px; background-color: aqua; } </style></head><body><h2>Stevin三天三夜</h2></body>显示效果：
七： 垂直居中—父元素高度确定的单行文本（方法一）
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。）。css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
<head> <meta charset="UTF-8"> <title>垂直居中-父元素高度确定的多行文本（方法一)</title> <style> td { background-color: aquamarine; height: 300px; } </style></head><body><table> <tbody> <tr> <td> <p>1111111111</p> <p>2222222222</p> <p>3333333333</p> <p>4444444444</p> <p>5555555555</p> </td> </tr> </tbody></table></body>显示效果：
八： 垂直居中—父元素高度确定的单行文本（方法二）
还可以使父元素高度确定的多行文本垂直居中之外，这种效果的方法。但这种方法兼容性比较差。在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但 IE6、7 并不支持这个样式, 兼容性比较差。
<head> <meta charset="UTF-8"> <title>垂直居中-父元素高度确定的多行文本（方法一)</title> <style> div { height: 300px; background: #ccc; display: table-cell; /*IE8以上及Chrome、Firefox*/ vertical-align: middle; /*IE8以上及Chrome、Firefox*/ } </style></head><body><div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p></div></body>显示效果：
九： 隐形改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
- position : absolute
- float : left 或 float:right
就是只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。
<head> <meta charset="UTF-8"> <title>隐性改变display类型</title> <style> a { /*position:absolute;*/ width:3000px; background-color: blue; } </style></head><body><div> <a>搜索公众号:Stevin三天三夜的专栏</a></div></body>显示效果：
阅读全文
0 0
- css样式设置
- css 超链接样式设置
- CSS ---关于设置样式
- div+css 样式 设置
- CSS设置hr样式
- CSS链接样式设置
- CSS样式设置技巧
- CSS样式设置详解
- CSS样式--居中设置
- CSS强制设置样式
- css设置文本样式
- css 样式设置
- CSS样式的设置
- css页面样式设置
- CSS样式设置
- CSS设置表格样式
- CSS样式设置
- css样式整体设置
- TestNG 中决定测试案例的执行顺序最好的办法
- Java Script-Lesson02
- Preparation
- hIve 和hbase的区别
- 基于时间序列模型的预测
- CSS样式设置
- 6.22周赛 Elevator 电梯模拟
- Android开发人员不得不收集的代码(持续更新中)
- 左右手坐标系的互换
- 在线云评测系统日志九
- 【笔记】Faster-R-CNN: Towards Real-Time Object Detection with Region Proposal Networks
- 关于ajax的操作
- Android 自定义View之自定义绘制（Custom Drawing）
- go 语言环境变量设置
