如何使用CSS在水平线中间添加文字？

html-css05

如何使用CSS在水平线中间添加文字？,第1张

如何使用CSS将文字显示在水平线中间？下面本篇文章就来给大家介绍使用CSS实现文字显示在水平线中间效果的方法，希望对大家有所帮助。

CSS提供了在网页中间制作包含文字或图像的水平线以使其具有吸引力的功能，这可以通过使用简单的CSS属性来实现。

语法：

示例1：将文字显示在水平线中间

效果图：

示例2：将图像显示在水平线中间

效果图：

本文参考地址： https://www.html.cn/qa/css3/10295.html

Html代码：

<body>

<div id="left">

左水平线

</div>

<div id="right">

右水平线

</div>

</body>

css代码：

<style type="text/css">

#left{

border-bottom:solid #999999 2px

margin-left:20%}

#right{

border-bottom:solid #999999 2px

margin-right:30%}

</style>

说明:其实水平线制作方法我也不是很清楚，我这个是用div做的，能到达你说的效果，但是我觉得应该还有更简单的办法！！知道了给我说哟，大家相互学习！