A plain horizontal rule dividing two sections is functional but visually plain — a decorative divider with a centered symbol, icon, or short text breaking the line adds a small touch of visual polish between content sections.
Enter your center text or symbol and choose a line color, see the divider render live with lines extending on both sides of the centered content, then copy the HTML and CSS needed to reuse the same divider style elsewhere.
The technique uses flexbox with two line elements that flex-grow to fill available space on either side of a centered, non-growing text or symbol element, keeping the divider perfectly centered regardless of container width.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.
A tool that does one job well, without a cluttered interface or unrelated features competing for attention, tends to be faster to use than a heavier all-in-one app.
If you find yourself needing this often, keeping this page open in a tab is usually faster than digging through a bigger software suite's menus.
Frequently asked questions
Can I use an icon instead of a text symbol?
Yes, replace the center text with any icon markup (an SVG, icon font character, or emoji) — the divider layout technique works the same regardless of what's centered.
Does the divider stay centered if the container width changes?
Yes, since the flanking lines use flexible flex-grow sizing rather than fixed widths, the centered content stays perfectly centered at any container width.