Lines above and below type

Good day all.

So I’m sure this could be accomplished with CSS, just not sure how.

Or maybe with a stack that’s out there?

I have some type that is centered (left-right) on a page. I want to add line about and below with some padding between the line and the type so that the type is centered between the lines.

If possible, the lines should be the width of the type plus maybe 10 pixels so the overhang the type a bit. But, not sure if that will work.

I’m guessing a box with a border top and bottom and add padding to make it look like the type is centered top-bottom ? But, how to get the box width to be wide enough so the type doesn’t split to two lines. Possible?

Thanks,
Paul

This can easily be done with the built-in Stacks’ Text stack. Just use a top/bottom border and some top/bottom padding for the distance the borders should be from the text. Use a bit of left/right padding to step the text in from the ends of the lines (so they extend past the text).

17%20AM

1 Like

Of course, it had to be that easy.

Thanks,