1. The vertical-align property achieves the following effect: The vertical-align property sets the vertical alignment of an element. This property defines the vertical alignment of an inline element's baseline relative to the baseline of the line in which the element resides. Negative length values and percentage values are allowed. <div class="header"> <span class="line"></span> <span class="text">Text in the middle, horizontal lines on both sides</span> <span class="line"></span> </div> <style> .header { width:400px; height:36px; line-height:36px; border:1px solid green; text-align:center; } .line { display:inline-block; width:100px; border-top:1px solid #cccccc; vertical-align:5px; // I saw online that .text is set to vertical-align:-5px. I tried it and it seems to conflict with the line-height set for .header, so the effect is not quite right. So set vertical-align to .line} </style> 2. CSS pseudo-class implementation effect: <div class="header"> <div>Text in the middle, horizontal lines on both sides</div> </div> <style> .header { width:400px; height:36px; line-height: 36px; text-align:center; border:1px solid green; position:relative; } .header div:before, .header div:after { position:absolute; background:#ccc; content:""; height:1px; top:50%; width:100px; } .header div:before{left:10px;} .header div:after{right:10px;} </style> Summarize The above is the CSS that I introduced to you to achieve the horizontal line effect on both sides of the middle text. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Vue template configuration and webstorm code format specification settings
>>: Detailed tutorial on installing pxc cluster with docker
When displaying long data in HTML, you can cut off...
This article example shares the specific code of ...
background When working on the blockchain log mod...
Automated build means using Docker Hub to connect...
Whether MySQL needs to commit when performing ope...
JavaScript clicks to change the shape of the pict...
When using CSS pseudo-elements to control element...
This article introduces 4 methods to achieve mask...
1. What is HTML HTML (HyperText Markup Language):...
Table of contents background Main content 1. Comp...
Recently I have been saying that design needs to h...
Nginx is a powerful, high-performance web and rev...
There is a new build tool in the Vue ecosystem ca...
Xrdp is an open source implementation of Microsof...
Preface The following are the ways to implement L...