css分割线 文字居中的7种实现方式
最近开始研究前端,会不定期更新一些小块代码,写下自己的学习笔记,也希望能和大家一起进步!
1.单个标签实现分隔线:
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .line_01{ width: 180px; padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; text-align: center; } </style> </head> <body> <div class="line_01">小小分隔线 单标签实现</div> </body> </html>
优点:代码简洁
2.巧用背景色实现分隔线:
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .line_02{ height: 1px; border-top: 1px solid #ddd; text-align: center; } .line_02 span{ position: relative; top: -8px; background: #fff; padding: 0 20px; } </style> </head> <body> <div class="line_02"><span>小小分隔线 巧用色实现</span></div> </body> </html>
优点:代码简洁,可自适应宽度
3.inline-block实现分隔线:
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .line_03{ width:600px; } .line_03 b{ background: #ddd; margin-top: 4px; display: inline-block; width: 180px; height: 1px; _overflow: hidden; vertical-align: middle; } .line_03 span{ display: inline-block; vertical-align: middle; padding: 0px 20px; } </style> </head> <body> <div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div> </body> </html>
优点:文字可多行
4.浮动实现分隔线:
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .line_04{ width:600px; } .line_04{ overflow: hidden; _zoom: 1; } .line_04 b{ background: #ddd; margin-top: 8px; float: left; width: 26%; height: 1px; _overflow: hidden; } .line_04 span{ float: left; padding: 0px 20px; } </style> </head> <body> <div class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></div> </body> </html>
5.hr实现分割线
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .hr-more { height: 20px; width: 70px; position: relative; left: 46%; top: -18px; font: normal 1.2em/20px 微软雅黑; vertical-align: middle; text-align: center; border-radius: 4px; background-color: #ffffff; } .div-box{ width: 600px; } </style> </head> <body> <div class="div-box"> <hr/> <div class="hr-more">更多</div> </div> </body> </html>
6.fieldset 实现分割线
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> fieldset { border:none;border-top:1px solid blue; } legend { width: 120px; text-align: center; } </style> </head> <body> <fieldset> <legend>fieldset分割线</legend> </fieldset> </body> </html>
7.after伪类实现分割线
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .hot { width: 100%; height: 20px; text-align: center; color: #000; font-size: 12px; line-height: 20px; position: relative; } .hot:after { content: ""; width: 100%; height: 1px; background-color: #c5c0c0; position: absolute; bottom: 50%; z-index: 1; left: 0; } .hot span { z-index: 2; position: relative; background-color: #ffffff; padding: 0 10px; } </style> </head> <body> <div class="hot"> <span>伪类实现分割线</span> </div> </body> </html>