CSS样式设置
2017-06-22 21:54
381 查看
一：水平居中设置—行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 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 : absolutefloat : 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>显示效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS样式设置透明度和渐变
- CSS：使用:first-letter设置首字样式
- css滚动条样式设置
- CSS样式设置(鼠标经过表格变色和控制表格隔行变色和添加CSS文件引用)
- W3C笔记－CSS巧妙设置table边框border的样式
- 简单设置blog的样式CSS
- css设置细线样式的表格
- css统一设置input样式（区分input类型）
- css统一设置input样式（区分input类型）
- jquery之修改元素样式(获取和设置样式,使用css(),width(),height()方法)
- css 表格设置为细线样式
- CSS、XHTML中隐藏滚动条与设置样式
- CSS的expression判断表达式设置input样式
- CSS ---关于设置样式
- 创建超链接及css 样式设置
- CSS、XHTML中隐藏滚动条与设置样式
- css 设置网页边框滚动条样式
- CSS设置滚动条样式
- LAMP兄弟连免费讲堂预告：[9月20日-21日] Web开发网络课堂第二讲：利用CSS设置网站样式和
- 每个页面通用的CSS：global.css 对某些标签进行初始化样式设置 加些特定的margin值 等