Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Omar Suriel
Omar Suriel
5,403 Points

How Can I replicate this style in CSS?

I am Developing a website from a photoshop design, There's a part where they have a line where that separates one section to the next one, and in the middle of the line they have the title for the section below. You should easily understand what I mean one you see the screenshot that I took. Please help understand how i can achive this in css without just slicing the image out of photoshop. thank you!!!

Image/screenshot: https://s28.postimg.org/6cy93i9tp/text_between_line_sample.jpg

1 Answer

stjarnan
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

Hi Omar!

You could try this:

 h1 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h1 span { 
    background: #fff; 
    padding: 0 10px; 
}

The text you want between the lines is put inside of a span element, a span element that will be inside of the h1(or whatever you're using). Then you just change colors etc as you want them. Good luck, I hope that works for you!

Omar Suriel
Omar Suriel
5,403 Points

thanks a lot!