html/ css 代码如何实现类似在hr中间夹文字的？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html/ css 代码如何实现类似在hr中间夹文字的？相关的知识，希望对你有一定的参考价值。
请问有没有html代码实现类似在hr中间夹文字的？
---------文字--------
谢谢！
这种效果一般是用来做分割线，分为以下两种情况
这种效果实现起来并不难，可以用很多方法实现：
方法1：图片，简单，美观
方法2：hr+p标签，两种情况p标签都要添加position：relative，p标签的z-index属性的值要高于hr标签，然后调整left和top的值，让文字压住横线，第一种情形p标签设置背景色白色，第二种背景透明即可
（图片文字已处理。。。）
参考技术A
html:
<hr style="border: 1px solid #c0c0c0"><div class="hr-more">更多</div>
css:
height: 20px; //div的高度
width: 50px; //div的宽度
position: relative; //div相对定位（重点！）
left: 50%; //将div相对于自己与左边(left)移动50%的距离（重点！）
top: -30px; //将div相对于自己向上(top)移动-30px的距离<调整你自己的参数>（重点！）
font: normal 1.2em/20px 微软雅黑; //字体（并不是必须，可不添加）
vertical-align: middle; //垂直居中（并不是必须，可不添加）
text-align: center; //水平居中（并不是必须，可不添加）
border-radius: 4px; //div呈现圆角效果（并不是必须，可不添加）
background-color: chartreuse; //div的背景色（并不是必须，可不添加）
最重要的是：
position: relative; （相对定位）
left: 50%; （居中的效果）
top: -30px; （注意是负数，根据自己的实际情况调整参数）
以下是方法：
HTML：
css：
一、电脑常见问题
主板不启动，开机无显示，有显卡报警声。
故障原因：一般是显卡松动或显卡损坏。
处理办法：打开机箱，把显卡重新插好即可。要检查AGP插槽内是否有小异物，否则会使显卡不能插接到位；对于使用语音报警的主板，应仔细辨别语音提示的内容，再根据内容解决相应故障。
如果以上办法处理后还报警，就可能是显卡的芯片坏了，更换或修理显卡。如果开机后听到"嘀"的一声自检通过，显示器正常但就是没有图像，把该显卡插在其他主板上，使用正常，那就是显卡与主板不兼容，应该更换显卡。
参考技术C这个用html5新的标签legend可以实现，你试试一下代码
<!DOCTYPE HTML><html>
<body>
<fieldset>
<legend>个人信息：</legend>
<div>内容</div>
</fieldset>
</body>
</html>本回答被提问者采纳 参考技术D 做成两线可以做背景图片。。然后文字在上面居中显示～追问
请写明详细代码，我html是刚入门，谢谢
如何使用 Tailwind CSS 做 HR 分隔符？
【中文标题】如何使用 Tailwind CSS 做 HR 分隔符？【英文标题】：Creating a horizontal rule (HR) divider that contains text with Tailwind CSS 【发布时间】：2022-01-09 04:22:00 【问题描述】：我想使用 Tailwind CSS 创建一个 <hr> 分隔符，但我在文档中找不到类似 https://i.stack.imgur.com/4kDRd.png 的内容。有人能帮我吗？我是 Tailwind CSS 的初学者。
【问题讨论】：
【参考方案1】：你必须使用css在tailwind中使用分隔符。另一方面你也可以使用边框属性
【讨论】：
你能用边框做一个简单的例子吗？【参考方案2】：试试这个...
<div class="relative">
<div class="w-full border-t border-gray-300"></div>
</div>
【讨论】：
【参考方案3】：您可以使用此 HTML 语法来创建您想要的内容：
<div class="relative flex py-5 items-center">
<div class="flex-grow border-t border-gray-400"></div>
<span class="flex-shrink mx-4 text-gray-400">Content</span>
<div class="flex-grow border-t border-gray-400"></div>
</div>
【讨论】：
这很好，请帮助文森特：D 这看起来不错。 如果不起作用，只需将 w-full 添加到父 div ！为我工作！【参考方案4】：这里是一个例子，你可以使用::before来控制样式，你可以使用额外的::after来添加居中图标
我把样式放到css块里，不然html里会有点乱
https://play.tailwindcss.com/o6hRnQrqVy
【讨论】：
以上是关于html/ css 代码如何实现类似在hr中间夹文字的？的主要内容，如果未能解决你的问题，请参考以下文章