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.
See and image:
How can I do this? I researched here on the site but could not find a solution.
Create DIV with border crossing title [duplicate]
-2
asked by anonymous 08.10.2018 / 18:07
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>
08.10.2018 / 18:14
0
Use the fieldset tag
Definition and use: The
<fieldset>tag is used to group elements related in a form.The
<fieldset>tag draws a box around the elements related.Tip: The
<legend>tag sets a caption for the<fieldset>element.
CSS Settings : Most browsers will display the <fieldset> element with the following default values. Font
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>
08.10.2018 / 18:13
0
One way to do this, 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>
08.10.2018 / 18:15