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>

转载于:https://www.cnblogs.com/leeLxj/p/6181992.html

css分割线文字居中的7种实现方式相关推荐

QComboBox文字居中的几种实现方式
不知道你有没有遇到过这样的需求,将一个QComboBox的文字居中显示.我最近遇到了这样的需要,主要是要在表头中增加可以下拉的列表来进行过滤的功能,这也就要求我们必须将下拉列表的文字居中显示. 这种需 ...
CSS元素上下左右居中的几种方式
CSS元素上下左右居中的几种方式假设以以下父子元素实现上下左右居中为例: <div class='father'><div class='son'></div> ...
css实现文字中间横线,css实现文字居中两边横线效果的示例代码
本文介绍了css实现文字居中两边横线效果的示例代码,分享给大家,具体笔记如下: 效果: content="width=device-width, user-scalable=no, init ...
html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中若文字只有一行文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...
通过CSS实现文字渐变色的两种方式
说明这次的重点就在于两个属性, background 属性 mask 属性这两个属性分别是两种实现方式的关键. 解释方式一效果图代码 <!DOCTYPE html> < ...
CSS绝对定位元素居中的几种方法
CSS居中绝对定位元素的方法,有很多种,下面是我收集的几种 1,div宽度未知1 <body><div style="position: absolute; left: 5 ...
CSS 使文字纵向排列的七种方
下面分享一下使文字纵排列的几种方法: 第一种方法:"<br>"标签 <h1> N E T T U T S </h1> 这种方法没有说服力,不推荐 ...
css中文字居中怎么设置
https://www.jb51.net/article/178250.htm (全面的介绍)https://blog.csdn.net/weixin_42878211/article/details ...

css分割线文字居中的7种实现方式

1.单个标签实现分隔线：

2.巧用背景色实现分隔线：

3.inline-block实现分隔线：

4.浮动实现分隔线：

5.hr实现分割线

6.fieldset 实现分割线

7.after伪类实现分割线

css分割线文字居中的7种实现方式相关推荐

最新文章

热门文章

css分割线 文字居中的7种实现方式

1.单个标签实现分隔线：

2.巧用背景色实现分隔线：

3.inline-block实现分隔线：

4.浮动实现分隔线：

5.hr实现分割线

6.fieldset 实现分割线

7.after伪类实现分割线

css分割线 文字居中的7种实现方式相关推荐

最新文章

热门文章

css分割线文字居中的7种实现方式

css分割线文字居中的7种实现方式相关推荐