How do I get h1 above border

Question

I'm coding a free PSD to HTML and everything is fine except one thing - I have no idea how to get something like this:

Slice from PSD

How do I get h1 above border so it can cover a part of it? Can it be done with pure CSS or do I have use JS?

Answer 1

body{
  background:white;
}
fieldset {
      display: block;
      margin: 20px 1%;
      margin-bottom: 20px;
      padding: 0 auto;
      padding: 15px 0;
      border: 0;
      border: 1px solid #000;
      width: 98%;
      background:white;
      color:black;
}

fieldset:last-of-type {
      margin-bottom: 0px;
}

legend {
     display: table; 
     min-width: 0px;
     max-width: 70%;
     position: relative;
     margin: auto;
     padding: 5px 20px;
     color: #000;
     font-size: 20px;
     text-align: center;
}

fieldset div{
  margin:0 auto;
  text-align:center;
  width:50%;
  //border:thin red solid;
  font-size:12px;
}

    <fieldset>
        <legend align="center" >About Us</legend>
          <div>
            When You work with us... content
          </div>
    </fieldset>

Are you looking for this?

Here is JSFiddle

Hope this helps.

Answer 2

Maybe with some regular tags (not against semantic) and flex you can do it:

div {
  magin: 2em;
  margin-top: 2em;
  border: solid;
  border-top: 0;
  padding: 1px;
  text-align: center;
}
h1 {
  margin-top: -0.6em;
  display: flex;
  align-items: center;
}
h1:before,
h1:after {
  content: '';
  flex: 1;
  border-bottom: solid;
  margin: auto -3px auto 2em;
}
h1:before {
  margin: auto 2em auto -3px;
}
p {
  padding: 1em;
}
/* do i see through ? */

body {
  background:linear-gradient(to bottom left, gray,yellow,purple,gold,pink,tomato);

<div>
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>

</div>

Answer 3

legend {
  padding: 1em;
  margin-left: calc(50% - 3em);
}

<fieldset>
  <legend>Test</legend>
</fieldset>

Answer 4

You might be looking for this

<div>
   <h1>Some Text</h1>
    <p>Some text also</p>
</div>

And styles are

div{
    border:1px solid #000;
    text-align:center;  
}
div h1{
    background:#fff;
    margin-top:-20px;
    width:200px;
    margin-left:auto;
    margin-right:auto;
 }

CSS is given in the link

jsfiddle