simona6 Posted July 28, 2024 Share Posted July 28, 2024 I've seen various methods but I can't see a good one to apply a vertically aligned line either side of text. Obviously you use a ::before and ::after, but if you do that, you can do it with a % width, and then you have to assign a width to the Text itself which varies based on width of screen. So how do you do it effectively? Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/ Share on other sites More sharing options...
requinix Posted July 28, 2024 Share Posted July 28, 2024 Describe (or draw) what you mean by "a vertically aligned line on either side of the text". Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1631185 Share on other sites More sharing options...
maxxd Posted July 29, 2024 Share Posted July 29, 2024 I'm also a bit confused by the percent width comment - you can use percentage as measurement, but you certainly don't have to. Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1631191 Share on other sites More sharing options...
Barand Posted July 29, 2024 Share Posted July 29, 2024 <style type='text/css'> .lr-border { display: inline-block; border-left: 3px solid gray; border-right: 3px solid gray; padding: 0 8px; margin: 30px 10px; } </style> <div class='lr-border'> Are you wanting something like this? </div> <br> <div class='lr-border'> ( where the width adjusts automatically with the text length ) </div> 1 Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1631199 Share on other sites More sharing options...
simona6 Posted August 11, 2024 Author Share Posted August 11, 2024 Apologies - I mean Horizontal. ------ like this ------- (but not dashed... and responsive). I've seen it done with some page builders, but can't see how to do it manually in CSS. Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1632448 Share on other sites More sharing options...
Barand Posted August 11, 2024 Share Posted August 11, 2024 You were asked... On 7/29/2024 at 12:40 AM, requinix said: Describe (or draw) what you mean by "a vertically aligned line on either side of the text". Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1632450 Share on other sites More sharing options...
simona6 Posted August 12, 2024 Author Share Posted August 12, 2024 Sure - I just did, as I meant Horiz. not vertical. thanks. Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1632472 Share on other sites More sharing options...
Barand Posted August 12, 2024 Share Posted August 12, 2024 Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1632476 Share on other sites More sharing options...
simona6 Posted September 3, 2024 Author Share Posted September 3, 2024 Yes, so how is that achieved? Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1634588 Share on other sites More sharing options...
Barand Posted September 3, 2024 Share Posted September 3, 2024 If I still have the code, I'll post it. However, as you are well aware, it can sometimes take weeks to complete the labour-intensive task of answering a post. Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1634598 Share on other sites More sharing options...
simona6 Posted September 3, 2024 Author Share Posted September 3, 2024 Indeed, specially when the website doesn't email you an alert to say a kind stranger has replied. Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1634599 Share on other sites More sharing options...
Barand Posted September 3, 2024 Share Posted September 3, 2024 My code... <!DOCTYPE html> <html lang='en'> <meta charset='utf-8'> <head> <title>Example</title> <style type="text/css"> body { font-family: verdana, sans-serif; font-size: 12pt; padding: 20px; } h2 { font-variant: small-caps; text-align: center; } .chapter { width: 100%; margin-top: 20px; margin-bottom: 20px; border-bottom: 5px solid blue; text-align: center; } .head-text { display: inline; padding: 0 10px; background-color: white; font-family: gabriola, cursive; font-size: 20pt; font-style: italic; font-weight: 600; position: relative; top: +26px; } p { text-align: justify; line-height: 22px; } </style> </head> <body> <h2>Book 3</h2> <div> <div class='chapter'> <div class='head-text'> Caput vigesimum septimum </div> </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> <p>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat. </p> <div class='chapter'> <div class='head-text'> Epilogus </div> </div> <p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. </p> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1634600 Share on other sites More sharing options...
simona6 Posted September 3, 2024 Author Share Posted September 3, 2024 What if it is on a background image? Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1634601 Share on other sites More sharing options...
Barand Posted September 3, 2024 Share Posted September 3, 2024 Then you should have mentioned that at the start instead of wasting our time on a different problem. Try experimenting. Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1634604 Share on other sites More sharing options...
simona6 Posted September 3, 2024 Author Share Posted September 3, 2024 Because I didn't know that would be a problem. I can see the white background forces the layer over the blue bar. But of course, if the background has an image, I have nowhere to go. Quote Link to comment https://forums.phpfreaks.com/topic/322665-how-do-you-place-a-line-either-side-of-text-in-css/#findComment-1634607 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.