Create DIV with border crossing the title

Asked

Viewed 1,134 times

-2

I need to make a div that has a border of 2 px, but this div has a title and I need this title to be centered with the border.

View and image: inserir a descrição da imagem aqui

How can I do that? I searched here on the site but could not find a solution.

3 answers

3


You can do something like this:

.form1 {
  text-align: 'center'
}
.form1 fieldset{
  border: 2px solid #06c;
}
.form1 legend{
  text-align: 'center'
  width: 400px;
  margin:auto;
}
<form class="form1" action="/">
  <fieldset>
    <legend>Formulário 1</legend>
    Nome:<br>
    <input type="text" name="nome">
    <br>
    Email:<br>
    <input type="email" name="email" >
    <br><br>
    <input type="submit" value="Enviar">
  </fieldset>
</form>

  • Thanks, it worked here!

0

Use the tag fieldset

Definition and usage: A tag <fieldset> is used to group elements related on a form.

The tag <fieldset> draws a box around the elements related.

Tip: The tag <legend> sets a label for the widget <fieldset>.

Settings CSS default: Most browsers will display the element <fieldset> with the following standard values. Source

fieldset { 
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove (internal value);
}

Example

legend {
  border: 2px;
  text-align:center;
}
<form>
  <fieldset>
    <legend>Dados Pessoais:</legend>
    Nome: <input type="text"><br>
    Email: <input type="text"><br>
    Nascimento: <input type="text">
  </fieldset>
</form>

  • 1

    Thanks, it worked here!

0

A way of doing using div:

.title_box {
  border: black 2px solid;
}

.title_box #title {
  position: relative;
  top: -0.5em;
  margin-left: 1em;
  display: inline;
  background-color: white;
}

.title_box #content {}
<div class="title_box" id="subject">
  <div id="title">Filtro de disciplina</div>
  <div id="content">
    TEXT.<br>
  </div>
</div>

  • Interesting fact: the question asks for a solid 2 px edge, why did a dotted 1 px edge?

  • I found an answer I used div and replied quickly, I thought it would be somewhat "perfumery" to make the border identical since the major problem has to do with centering the text on the edge. I corrected the reply. Thank you.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.