小白教程
所有教程
关于
Search
172.70.126.9
172.70.126.9
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS 布局 – 水平 & 垂直对齐”的源代码
本页内容
上一节:
CSS_Float(浮动)
下一节:
CSS_伪类
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS 对齐}}[[Category:CSS 教程|23]] = CSS 布局 - 水平 & 垂直对齐 = == 水平 & 垂直居中对齐 == == 元素居中对齐 == 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。 设置到元素的宽度将防止它溢出到容器的边缘。 元素通过指定宽度,并将两边的空外边距平均分配: div 元素是居中的 <sample title="" desc="" lang="html" hererun="1"> .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .center { margin: auto; width: 60%; border: 3px solid #73AD21; padding: 10px; } </style> </head> <body> <h2>元素居中对齐</h2> <p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p> <div class="center"> <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p> </div> </body> </html> </run> '''注意:''' 如果没有设置 width 属性(或者设置 100%),居中对齐将不起作用。 == 文本居中对齐 == 如果仅仅是为了文本在元素内居中对齐,可以使用 text-align: center; 文本居中对齐 <sample title="" desc="" lang="html" hererun="1"> .center { text-align: center; border: 3px solid green; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .center { text-align: center; border: 3px solid green; } </style> </head> <body> <h2>文本居中对齐</h2> <div class="center"> <p>文本居中对齐。</p> </div> </body> </html> </run> '''提示:''' 更多文本对齐实例,请参阅 [[css text|CSS 文本]] 章节。 == 图片居中对齐 == 要让图片居中对齐, 可以使用 margin: auto; 并将它放到 '''块''' 元素中: <sample title="" desc="" lang="html" hererun="1"> img { display: block; margin: auto; width: 40%; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> img { display: block; margin: 0 auto; } </style> </head> <body> <h2>图片居中对齐</h2> <p>要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:</p> <img src="//static.xiaobai.wang/images/mix/paris.jpg" alt="Paris" style="width:40%"> </body> </html> </run> == 左右对齐 - 使用定位方式 == 我们可以使用 position: absolute; 属性来对齐元素: 小白教程 -- 学习使人快乐!!! <sample title="" desc="" lang="html" hererun="1"> .right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <style> .right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; } </style> </head> <body> <h2>右对齐</h2> <p>以下实例演示了如何使用 position 来实现右对齐:</p> <div class="right"> <p>小白教程 -- 学习使人快乐!!</p> </div> </body> </html> </run> 注释:绝对定位元素会被从正常流中删除,并且能够交叠元素。 '''提示:''' 当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。 当使用 position 属性时,IE8 以及更早的版本存在一个问题。如果容器元素(在我们的案例中是 <div class="container">)设置了指定的宽度,并且省略了 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时,请始终设置 !DOCTYPE 声明: <sample title="" desc="" lang="html" hererun="1"> body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; } </style> </head> <body> <div class="container"> <div class="right"> <p><b>注意: </b>当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。</p> </div> </div> </body> </html> </run> == 左右对齐 - 使用 float 方式 == 我们也可以使用 float 属性来对齐元素: <sample title="" desc="" lang="html" hererun="1"> .right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; } </style> </head> <body> <h2>右对齐</h2> <p>以下实例演示了使用 float 属性来实现右对齐:</p> <div class="right"> <p>我老爹在小时候给我的一些人生建议,我现在还记忆深刻。</p> </div> </body> </html> </run> 当像这样对齐元素时,对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。 <blockquote>注意:如果子元素的高度大于父元素,且子元素设置了浮动,那么子元素将溢出,这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。 </blockquote> 我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题: <sample title="" desc="" lang="html" hererun="1"> .clearfix { overflow: auto; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { border: 3px solid #4CAF50; padding: 5px; } .img1 { float: right; } .clearfix { overflow: auto; } .img2 { float: right; } </style> </head> <body> <p>以下实例图在父元素中溢出,很不美观:</p> <div> <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> 小白教程 - 学习使人快乐!!!</div> <p style="clear:right">在父元素上通过添加 clearfix 类,并设置 overflow: auto; 来解决该问题:</p> <div class="clearfix"> <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> 小白教程 - 学习使人快乐!!!</div> </body> </html> </run> 当使用 float 属性时,IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时,请始终设置 !DOCTYPE 声明: <sample title="" desc="" lang="html" hererun="1"> body { margin: 0; padding: 0; } .right { float: right; width: 300px; background-color: #b0e0e6; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> body { margin: 0; padding: 0; } .right { float: right; width: 300px; background-color: #b0e0e6; } </style> </head> <body> <div class="right"> <p><b>注意: </b>当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。</p> </div> </body> </html> </run> == 垂直居中对齐 - 使用 padding == CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding: 我是垂直居中。 <sample title="" desc="" lang="html" hererun="1"> .center { padding: 70px 0; border: 3px solid green; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .center { padding: 70px 0; border: 3px solid green; } </style> </head> <body> <h2>垂直居中</h2> <p>以上实例,我们使用 padding 属性实现元素的垂直居中:</p> <div class="center"> <p>我是垂直居中的。</p> </div> </body> </html> </run> 如果要水平和垂直都居中,可以使用 padding 和 text-align: center: 我是水平和垂直都居中的。 <sample title="" desc="" lang="html" hererun="1"> .center { padding: 70px 0; border: 3px solid green; text-align: center; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .center { padding: 70px 0; border: 3px solid green; text-align: center; } </style> </head> <body> <h2>Centering</h2> <p>以下实例,我们使用 padding 和 text-align 让 div 元素的水平和垂直方向都居中:</p> <div class="center"> <p>我是水平和垂直都居中的。</p> </div> </body> </html> </run> == 垂直居中 - 使用 line-height == 我是垂直居中的。 <sample title="" desc="" lang="html" hererun="1"> .center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } /* 如果文本有多行,添加以下代码: */ .center p { line-height: 1.5; display: inline-block; vertical-align: middle; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } .center p { line-height: 1.5; display: inline-block; vertical-align: middle; } </style> </head> <body> <h2>居中</h2> <p>以下实例中,我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中:</p> <div class="center"> <p>我是垂直居中的。</p> </div> </body> </html> </run> == 垂直居中 - 使用 position 和 transform == 除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中: <sample title="" desc="" lang="html" hererun="1"> .center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> </head> <body> <h2>居中</h2> <p>以下实例中,我们使用了 positioning 和 transform 属性来设置水平和垂直居中:</p> <div class="center"> <p>我是水平和垂直居中的。</p> </div> <p>注意: IE8 及更早版本不支持 transform 属性。</p> </body> </html> </run> '''提示:''' 更多 transform 属性内容可以参阅 [[css3 2dtransforms|2D 翻转章节]]。 == 更多实例 == [https://c.xiaobai.wang/codedemo/3360 CSS 使用 margin 让 div 居中对齐] [https://c.xiaobai.wang/codedemo/3361 CSS 使用绝对定位 让 div 右对齐]
返回至“
CSS 布局 – 水平 & 垂直对齐
”。
上一节:
CSS_Float(浮动)
下一节:
CSS_伪类