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

最新推荐文章于 2024-03-27 20:04:50 发布

想出轨的电动车

最新推荐文章于 2024-03-27 20:04:50 发布

阅读量3.7k

点赞数 2

分类专栏：前端文章标签：前端 CSS

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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

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

语法：

h4:before, h4:after {
     content: "";
     flex: 1 1;
     border-bottom: 2px solid #000;
     margin: auto;
}

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			h4 {
				display: flex;
				flex-direction: row;
			}
			
			h4:before,
			h4:after {
				content: "";
				flex: 1 1;
				border-bottom: 2px solid #000;
				margin: auto;
			}
			
			img {
				height: 100px;
				width: 100px;
				border-radius: 50%;
			}
		</style>
	</head>

	<body>
		<h4>HTML中文网</h4>
	</body>

</html>

效果图：

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			h1 {
				display: flex;
				flex-direction: row;
			}
			
			h1:before,
			h1:after {
				content: "";
				flex: 1 1;
				border-bottom: 2px solid #000;
				margin: auto;
			}
			
			img {
				height: 100px;
				width: 120px;
				border-radius: 50%;
			}
		</style>
	</head>

	<body>
		<h1>
			<img src="https://www.html.cn/static/images/logo.png"> 
        </h1>
	</body>

</html>

效果图：

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

想出轨的电动车

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
如何使用CSS在水平线中间添加文字？

如何使用CSS将文字显示在水平线中间？下面本篇文章就来给大家介绍使用CSS实现文字显示在水平线中间效果的方法，希望对大家有所帮助。CSS提供了在网页中间制作包含文字或图像的水平线以使其具有吸引力的功能，这可以通过使用简单的CSS属性来实现。语法：h4:before, h4:after { content: ""; flex: 1 1; border-...
复制链接

扫一扫