html里怎么在文字左侧画线,如何使用CSS将文字显示在水平线中间？

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

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

语法：h4:before, h4:after {

content: "";

flex: 1 1;

border-bottom: 2px solid #000;

margin: auto;

}

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

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%;

}

HTML中文网

效果图：

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

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%;

}

效果图：