CSS Tips: Create Horizontal Lines and Centered Text
P粉248602298
2023-08-20 15:11:18
<p>I'm trying to make a horizontal divider with some text.
For example: </p>
<p>---------------------------------- Here is my title------ -----------------------</p>
<p>Is there a way to achieve this effect in CSS? Obviously there is no need to use all the "-" dashes. </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
After trying different solutions, I found a solution that works for different text widths, any possible background and without adding extra markup.
h1 { overflow: hidden; text-align: center; } h1:before, h1:after { background-color: #000; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } h1:before { right: 0.5em; margin-left: -50%; } h1:after { left: 0.5em; margin-right: -50%; }I tested in IE8, IE9, Firefox and Chrome. You can check it here: http://jsfiddle.net/Puigcerber/vLwDf/1/
This is roughly how I would do it: by setting
border-bottomon the containingh2, and then givingh2a smallerline-heightto create lines. Then put the text inside a nestedspanwith a non-transparent background.h2 { width: 100%; text-align: center; border-bottom: 1px solid #000; line-height: 0.1em; margin: 10px 0 20px; } h2 span { background:#fff; padding:0 10px; }