html/ css 代码如何实现类似在hr中间夹文字的?

发布网友发布时间：2022-04-25 11:59

我来回答

共6个回答

热心网友时间：2022-04-06 11:52

这种效果一般是用来做分割线，分为以下两种情况

这种效果实现起来并不难，可以用很多方法实现：

方法1：图片，简单，美观

方法2：hr+p标签，两种情况p标签都要添加position：relative，p标签的z-index属性的值要高于hr标签，然后调整left和top的值，让文字压住横线，第一种情形p标签设置背景色白色，第二种背景透明即可

（图片文字已处理。。。）

热心网友时间：2022-04-06 13:10

html:

css:

.hr-more {
    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; （注意是负数，根据自己的实际情况调整参数）

热心网友时间：2022-04-06 14:45

以下是方法：

HTML：

css：

一、电脑常见问题

主板不启动，开机无显示，有显卡报警声。

故障原因：一般是显卡松动或显卡损坏。

处理办法：打开机箱，把显卡重新插好即可。要检查AGP插槽内是否有小异物，否则会使显卡不能插接到位；对于使用语音报警的主板，应仔细辨别语音提示的内容，再根据内容解决相应故障。

如果以上办法处理后还报警，就可能是显卡的芯片坏了，更换或修理显卡。如果开机后听到"嘀"的一声自检通过，显示器正常但就是没有图像，把该显卡插在其他主板上，使用正常，那就是显卡与主板不兼容，应该更换显卡。

热心网友时间：2022-04-06 16:36

这个用html5新的标签legend可以实现，你试试一下代码

<!DOCTYPE HTML>
<html>
<body>
<fieldset>
<legend>个人信息：</legend>
<div>内容</div>
</fieldset>
</body>
</html>

热心网友时间：2022-04-06 18:44

做成两线可以做背景图片。。然后文字在上面居中显示～追问请写明详细代码，我html是刚入门，谢谢

热心网友时间：2022-04-06 21:09

那个就不要用hr，自己弄个和hr一样的背景图片就可以了

全部栏目

html/ css 代码如何实现类似在hr中间夹文字的?