2

I'm curious about how the web browser displays the legend tags content by inserting the content between a border. If I wanted to recreate this myself I'm thinking I would have to mess with absolute/relative positioning but I think/hope there's a much cleaner way..:P

I inspected the source code but quickly gave up :P

Here's some sample code: 

<fieldset>
  <legend>How did i get here?</legend>
  Name: <input type="text"><br>
  Email: <input type="email">
</fieldset>
Govind Rai
  • 14,406
  • 9
  • 72
  • 83
  • Does this previous answer help? http://stackoverflow.com/questions/7731310/text-in-border-css-html – SomeGuy Oct 03 '16 at 22:50
  • That's definitely an insightful answer, but it doesn't provide the answers I'm looking for. For example, no matter how much you increase the `font-size` of the `legend` tag, it will come out looking clean and centered. In the above answer however, users are applying guess work on margins and paddings to see if the positioning renders accurately. – Govind Rai Oct 03 '16 at 23:29

1 Answers1

0

I found an amazing tutorial to Add A Line Through Your Titles With CSS

So I made this JSFiddle

  • The line will always be in the middle of the title, regardless of the size of the text.

  • Make sure to give enough space to the .box to avoid the text to be too close to the title.

  • If you want to give the same look of the legend, you can change the .top_box class and put text-align: left; with some padding-left

I hope this answers your question.

Garric
  • 552
  • 3
  • 13
  • 29