📜 ⬆️ ⬇️

Text in line or how to beat designer

Hello



Each typesetter at least once had to deal with the task of placing the text inside the line.
For example, like this:

image
')
There are never problems if the background is solid. But what if the background is a picture as in this example?
I propose bringing the following decision to your court. Maybe someone will offer additions or make comments, I am only for.

Example: link

The essence of the solution is as follows:

- make a wrapper with a background image and make it overflow-hidden (to hide the extra parts of the lines)
- inside we insert a wrapper for the title in which we center the text block (text-align: center)
- to the block in which the text is doing relative positioning (position: relative) and display: inline-block
- inside the block with the text we put two lines, for example tags
- we make positon: absolute for each of the lines, obviously a large width (for example, 1000% of the parent block) and top: (X) px (to align the line in the center of the text)
- then alternately position the lines 100% to the left for the right line and to the right for the left
- indents from the text to the lines make inner padding padding.

Waiting for your answers.

Source: https://habr.com/ru/post/184274/


All Articles