行内元素水平居中如何设置? 如果被设置元素为文本, 图片等行内元素时, 水平居中是通过给父元素设置 text-align:center 来实现的.
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 行内水平居中设置
- </title>
- <style type="text/CSS">
- div.box1,h5{ border: 1px solid red;/* 为了显示居中效果明显为 div 设置了边框 */ text-align:
- center; }
- </style>
- </head>
- <body>
- <h5>
- 行内元素水平居中如何设置? 如果被设置元素为文本, 图片等行内元素时, 水平居中是通过给父元素设置 text-align:center 来实现的.
- </h5>
- <div class="box1">
- <img src="https://www.cnblogs.com/images/logo_small.gif">
- </div>
- </body>
- </HTML>
当被设置元素为 块状元素 时用 text-align:center 就不起作用了, 这时也分两种情况: 定宽块状元素和不定宽块状元素.
A. 定宽块状元素 (块状元素的宽度 width 为固定值) 如何设置水平居中? 满足定宽和块状两个条件的元素是可以通过设置 "左右 margin" 值为 "auto" 来实现居中的. 同时 margin-left:auto;margin-right:auto; 元素的 margin 是可以随意设置的.
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
5 <title > 定宽块状元素设置</title>
- <style type="text/css">
- div.box1{
- border: 1px solid red;
- width: 600px;
- /*text-align: center;*//* 当被设置元素为 块状元素 时用 text-align:center 就不起作用了 */
- margin: 0 auto;
- /* margin-left: auto; 13 margin-right: auto; */
- }
- </style>
- </head>
- <body>
18 <div class="box1">明日复明日, 明日何其多, 我生待明日, 万事成蹉跎</div>
- </body>
- </HTML>
B. 不定宽度的块状元素 (块状元素的宽度 width 不固定) 设置居中, 比如网页上的分页导航, 因为分页的数量是不确定的, 所以我们不能通过设置宽度来限制它的弹性. 不定宽度的块状元素有三种方法居中 1. 加入 table 标签 2. 设置 display: inline 方法: 与第一种类似, 显示类型设为 行内元素, 进行不定宽元素的属性设置 3. 设置 position:relative 和 left:50%: 利用 相对定位 的方式, 将元素向左偏移 50% , 即达到居中的目的
B-1: 为什么选择方法一加入 table 标签? 是利用 table 标签的长度自适应性 --- 即不定义其长度也不默认父元素 body 的长度(table 其长度根据其内文本长度决定), 因此可以看做一个定宽度块元素, 然后再利用定宽度块状居中的 margin 的方法, 使其水平居中. 第一步: 为需要设置的居中的元素外面加入一个 table 标签 ( 包括 < tbody>,<tr>,<td> ). 第二步: 为这个 table 设置 "左右 margin 居中"(这个和定宽块状元素的方法一样).
B-2: 改变元素的 display 类型为行内元素, 利用其属性直接设置(改变块级元素的 display 为 inline 类型(设置为 行内元素 显示), 然后使用 text-align:center 来实现居中效果)
B-3: 通过给父元素设置 float, 然后给父元素设置 position:relative 和 left:50%, 子元素设置 position:relative 和 left: -50% 来实现水平居中.
针对 B-1 与 B-2 总结: 这种方法相比第一种方法的优势是不用增加无语义标签, 但也存在着一些问题: 它将块状元素的 display 类型改为 inline, 变成了行内元素, 所以少了一些功能, 比如设定长度值.
B-3:/ 假想 ul 层的父层 (即下面例子中的 div 层) 中间有条平分线将 ul 层的父层 (div 层) 平均分为两份, ul 层的 CSS 代码是将 ul 层的最左端与 ul 层的父层 (div 层) 的平分线对齐; 而 li 层的 CSS 代码则是将 li 层的平分线与 ul 层的最左端 (也是 div 层的平分线) 对齐, 从而实现 li 层的居中./
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 不定宽块状元素设置
- </title>
- <style type="text/css">
- table{ border: 1px solid red; margin: 0 auto; } .container{ text-align:
- center; border: 1px solid #0000FF; } .container ul{ list-style: none; margin:
- 0; padding: 0; /* margin:0;padding:0(消除文本与 div 边框之间的间隙)*/ } .container
- ul li{ display: inline; } .box,.box ul{ position: relative; } .box{ float:
- left; left: 50%; } .box ul{ list-style: none; margin: 0; padding: 0; left:
- -50%; } /* .box ul li{ 39 float: left; 40 display: inline; 41 } */
- </style>
- </head>
- <body>
- <!-- 加入 table 标签 -->
- <table>
- <tbody>
- <tr>
- <td>
- <ul>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 1
- </li>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 2
- </li>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 3
- </li>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 4
- </li>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 5
- </li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
- <!-- 设置 display: inline 方法: 与第一种类似, 显示类型设为 行内元素, 进行不定宽元素的属性设置 -->
- <div class="container">
- <ul>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 1
- </li>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 2
- </li>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 3
- </li>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 4
- </li>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 5
- </li>
- </ul>
- </div>
- <!-- 设置浮动和相对定位来实现 -->
- <div class="box">
- <ul>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 1
- </li>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 2
- </li>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 3
- </li>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 4
- </li>
- <li>
- 明日复明日, 明日何其多, 我生待明日, 万事成蹉跎 5
- </li>
- </ul>
- </div>
- </body>
- </HTML>
为了用户体验性好, 除了水平居中, 我们还有垂直居中, 这里我们又得分两种情况: 父元素高度确定的单行文本, 以及父元素高度确定的多行文本.
C-1: 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的. line-height 与 font-size 的计算值之差, 在 CSS 中成为 "行间距". 分为两半, 分别加到一个文本行内容的顶部和底部. 这种文字行高与块高一致带来了一个弊端: 当文字内容的长度大于块的宽时, 就有内容脱离了块.
C2 父元素高度确定的多行文本, 图片等的竖直居中的方法有两种:
C2-1: 使用插入 table (包括 tbody,tr,td)标签, 同时设置 vertical-align:middle.CSS 中有一个用于竖直居中的属性 vertical-align, 在父元素设置此样式时, 会对 inline-block 类型的子元素都有用./ 因为 td 标签默认情况下就默认设置了 vertical-align 为 middle, 所以我们不需要显式地设置了./
C2-2: 在 Chrome,Firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示), 激活 vertical-align 属性, 但注意 IE6,7 并不支持这个样式, 兼容性比较差.(不推荐)
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 垂直居中
- </title>
- <style type="text/css">
- .box1{ width: 600px; height: 50px; line-height: 50px; border: 1px solid
- red; background-color: #f90; }/* 当文字内容的长度大于块的宽时, 就有内容脱离了块.*/ table td{
- /* vertical-align: middle; */ background-color: #008000; height: 100px;
- color: #fff; } .box2{ height: 200px; display: table-cell; vertical-align:
- middle; background-color: #00FFFF; padding: 0 20px; }/* 在 Chrome,Firefox
- 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示), 激活 vertical-align
- 属性, 但注意 IE6,7 并不支持这个样式, 兼容性比较差.*/ .box2 ul li::selection{ background-color:
- blueviolet; color: lightblue; } .box2 ul{ list-style: none; margin: 0;
- padding: 0; }
- </style>
- </head>
- <body>
- <!-- 父元素高度确定的单行文本 -->
- <div class="box1">
- Tomorrow is coming, tomorrow is so many, I will be born tomorrow, everything
- will happenTomorrow is coming, tomorrow is so many, 42
- </div>
- <!-- C2-1 使用插入 table (包括 tbody,tr,td)标签, 同时设置 vertical-align:middle. -->
- <table>
- <tbody>
- <tr>
- <td>
- Tomorrow is coming, tomorrow is so many, I will be born tomorrow, everything
- will happenTomorrow is coming, tomorrow is so many, I will be born tomorrow,
- everything will happenTomorrow is coming, tomorrow is so many, I will be
- born tomorrow, everything will happen 49
- </td>
- </tr>
- </tbody>
- </table>
- <!-- C2-2: 在 chrome,firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),
- 激活 vertical-align 属性, 但注意 IE6,7 并不支持这个样式, 兼容性比较差.(不推荐) -->
- <div class="box2">
- <ul>
- <li>
- Hello saturday, i'm friday yesterday, buddy has not been very good this
- week, can you treat him tenderly
- </li>
- <li>
- Hello saturday, i'm friday yesterday, buddy has not been very good this
- week, can you treat him tenderly
- </li>
- <li>
- Hello saturday, i'm friday yesterday, buddy has not been very good this
- week, can you treat him tenderly
- </li>
- <li>
- Hello saturday, i'm friday yesterday, buddy has not been very good this
- week, can you treat him tenderly
- </li>
- <li>
- Hello saturday, i'm friday yesterday, buddy has not been very good this
- week, can you treat him tenderly
- </li>
- </ul>
- </div>
- </body>
- </HTML>
最后有一个有趣的现象就是当为元素 (不论之前是什么类型元素, display:none 除外) 设置以下 2 个句之一: 1. position : absolute 2. float : left 或 float:right (简单来说, 只要 HTML 代码中出现以上两句之一, 元素的 display 显示类型就会自动变为以 display:inline-block(块状元素)的方式显示, 当然就可以设置元素的 width 和 height 了, 且默认宽度不占满父元素)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title > 隐性改变 display 类型</title>
- <style type="text/css">
- .box1,.box2{
- background: #00FF00;
- /* display: none; */
- width: 400px;
- height: 300px;
- color: #fff;
- text-align: justify;
- }
- .box1{
- float: left;
- border: 2px solid red;
- }
- .box2{
- position: absolute;
- left: 50px;
- top: 150px;
- border: 2px solid #0000FF;
- }
- .box3{
- background-color: #f90;
- color: #fff;
- font-weight: lighter;
- width: 400px;
- position: relative;
- left: 20px;
- top: 50px;
- }
- </style>
- </head>
- <body>
- <span class="box1">
box1 简单来说, 只要 HTML 代码中出现 2 者之一 1\. position : absolute 2\. float : left 或 float:right , 元素的 display 显示类型就会自动变为以 display:inline-block(块状元素)的方式显示, 当然就可以设置元素的 width 和 height 了, 且默认宽度不占满父元素. 39 </span>
<em class="box2">
box2 简单来说, 只要 HTML 代码中出现 2 者之一 1\. position : absolute 2\. float : left 或 float:right , 元素的 display 显示类型就会自动变为以 display:inline-block(块状元素)的方式显示, 当然就可以设置元素的 width 和 height 了, 且默认宽度不占满父元素. 42 </em>
- <strong class="box3">box3 简单来说, 只要 HTML 代码中出现 2 者之一 1\. position : absolute 2\. float : left 或 float:right , 元素的 display 显示类型就会自动变为以 display:inline-block(块状元素)的方式显示, 当然就可以设置元素的 width 和 height 了, 且默认宽度不占满父元素.</strong>
- </body>
- </HTML>
来源: http://www.jianshu.com/p/a6157f3d8bce