How to realize the title effect of middle text and horizontal lines on both sides by css
This article mainly introduces css how to achieve the middle text, both sides of the horizontal line title effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.
1.vertical-align attribute
The vertical-align property sets the vertical alignment of the element.
This attribute defines the vertical alignment of the baseline of an inline element relative to the baseline of the row in which the element is located. Allows you to specify negative length values and percentage values.
Middle text, horizontal lines on both sides
.header
{
Width:400px
Height:36px
Line-height:36px
Border:1pxsolidgreen
Text-align:center
}
.line
{
Display:inline-block
Width:100px
Border-top:1pxsolid#cccccc
Vertical-align:5px
/ / when I see that .text is set to vertical-align:-5px on the Internet, I try to feel that it conflicts with the line-height set by .header, and the effect is not appropriate. So vertical-align is set to .line.
}
The effect of 2.css pseudo-class implementation:
Middle text, horizontal lines on both sides
.header
{
Width:400px
Height:36px
Line-height:36px
Text-align:center
Border:1pxsolidgreen
Position:relative
}
.headerdiv: before,.headerdiv:after
{
Position:absolute
Background:#ccc
Content: ""
Height:1px
Top:50%
Width:100px
}
.headerdiv: before {left:10px;}
.headerdiv: after {right:10px;}
Thank you for reading this article carefully. I hope the article "how to achieve the title effect of the middle text and the horizontal lines on both sides of the css" shared by the editor is helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
