How to with CSS?
- Started
- Last post
- 6 Responses
- mg33
Trying to think of a creative way to display multiple headings, centered, on a page in different sections from top to bottom.
960px wide, top of a div, text centered, with a 1px line to left and right of heading, like this (but solid line). Line must be centered vertically between the height of the text.
----------------------- Heading ----------------------
Options? I was thinking either a 1px high png image repeated, centered in a div to left and right, or, two divs vertically on either side of equal height with a bottom border on the top ones. Make sense?
Mocked up something and now wondering how to pull this off. Much thanks.
- crillix0
Give this a try...
http://css-tricks.com/line-on-si…
- albums0
use the css psuedo elements before and after.
- inteliboy0
- lol!ohhhhhsnap
- Hahahahaha - excellent!mg33
- lolukit2
- lol!crillix
- mg330
This worked perfectly, via crillix's link:
It is set up for two lines on each side, but removing border-bottom took care of that.
Thanks again crillix.
- Why port it to JSFiddle when it's already on Codepen?orrinward2
- That's not my code. Someone else's that was linked in the article above.mg33
- crillix0
Sweet, glad that worked for ya.
- mg330
Yeah, the solution that worked is surprisingly less involved than the one in the original post on that link.