How to align Legend tag to center of the screen

In this article, we will learn how to align html legend tag in the center of the screen with the use of CSS and the alignment attribute of the legend tag.

How to Align Legend tag to the center of the screen?

To align the legend tag to the center of the screen, we can use the CSS margin-left property and the legend tag center align property to align the <legend> tag element to the center.

Following are examples of aligning legend tag to the center of the screen.

Example 1: Align Legend tag to center of the screen using CSS.

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
        <title> Align Legend tag to center of screen using CSS </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
* { box-sizing: border-box; }
body { 
	background-color: #333; 
	font-size: 1rem; 
	font-family: 'Lato';
	font-weight: bold;
} 
fieldset {
  border: thin solid white;
  margin: 0 auto;
  padding: 2em;
  width: 75%;
}
form {
position: relative;
width: 640px;
margin: 1% auto;
border: tan solid 10px;
border-top: #bda27e solid 12px;
border-left: #b19876 solid 12px;
border-bottom: #c9ad86 solid 12px;
box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1));
background-color: #333;
}
form:before {
box-sizing: border-box;
display: block;
position: absolute;
width: 100%;
height: 100%;
border: #2c2c2c solid 1px;
font-family: 'Permanent Marker', cursive;
font-size: 2.2em;
color: rgba(238, 238, 238, 0.7);
text-align: center;
padding-top: 20px;
}
h1 { 
font-size: 1.5em; 
color: whitesmoke; 
font-weight: 400; 
margin-bottom: 0.2em; 
margin-top: 0; 
font-family: 'Permanent Marker', 
cursive; text-slign: center;  }
p { font-size: 1em; color: whitesmoke; margin-bottom: 1em; margin-top: 0; }
a { color: dodgerblue; text-decoration: none; border-bottom: 1px dotted; }
a:hover { color: tomato; }
.container { 
	max-width: 1060px; 
	height: 100%;
	margin: 0 auto; 
	padding: 1em;
}
form > div {
	display: flex;
	flex-wrap: wrap;
}
form > div > p {
	min-width: 33.33%;
	padding: 6px;
}
form p { color: tomato; }
form > div { margin-bottom: 1em; }
button {
	color: inherit;
	font: inherit;
	margin: 0;
	margin-top: 0.5em;
}
input {
	color: inherit;
	font: inherit;
	margin: 0;
	margin-top: 0.5em;
}
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
	margin-top: 0.5em;
}
label {
	display: block;
	margin: 0.25em 0;
	font-weight: bold;
	font-family: 'Permanent Marker', cursive;
	color: rgba(238, 238, 238, 0.7);
}
button {
	-webkit-appearance: button;
	cursor: pointer;
}
input[type=button] {
	-webkit-appearance: button;
	cursor: pointer;
}
input[type=submit] {
	-webkit-appearance: button;
	cursor: pointer;
}
input {
	line-height: normal;
}
textarea { line-height: 1.25em; }
input[type=text] {
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 2px;
	vertical-align: middle;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.5em 0.6em;
	margin-bottom: 0.5em;
}
input[type=password] {
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 2px;
	vertical-align: middle;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.5em 0.6em;
	margin-bottom: 0.5em;
}
input[type=email] {
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 2px;
	vertical-align: middle;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.5em 0.6em;
	margin-bottom: 0.5em;
}
input[type=date] {
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 2px;
	vertical-align: middle;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.5em 0.6em;
	margin-bottom: 0.5em;
}
textarea {
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 2px;
	vertical-align: middle;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.5em 0.6em;
	margin-bottom: 0.5em;
}
input:not([type]) {
	display: inline-block;
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 2px;
	-webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0.5em 0.6em;
}
input[readonly] {
	background-color: #eee;
	color: #777;
	border-color: #ccc;
}
textarea[readonly] {
	background-color: #eee;
	color: #777;
	border-color: #ccc;
}
input:focus:invalid {
	color: #b94a48;
	border-color: #e9322d;
}
textarea:focus:invalid {
	color: #b94a48;
	border-color: #e9322d;
}
input[type="submit"] {
	display: inline-block;
	padding: 8px 12px;
	color: white;
	background-color: tomato;
	border: 0;
	cursor: pointer;
	transition: all 300ms ease;
}
input[type="button"] {
	display: inline-block;
	padding: 8px 12px;
	color: white;
	background-color: tomato;
	border: 0;
	cursor: pointer;
	transition: all 300ms ease;
}
button {
	display: inline-block;
	padding: 8px 12px;
	color: white;
	background-color: tomato;
	border: 0;
	cursor: pointer;
	transition: all 300ms ease;
  border-radius: 1rem;
  font-size: .8rem;
  text-decoration: none;
}
input[type="submit"]:hover {
	background-color: royalblue;
}
input[type="button"]:hover {
	background-color: royalblue;
}
button:hover {
	background-color: royalblue;
}
legend {
       padding: 2px;
       margin-left: calc(50% - 35px - 8px);
        color: tomato; 
       font-size: 20px;
      text-transform: capitalize;
        }
</style>
<body>
<div class = "container">
	<h1> Align Legend tag to center of screen using CSS </h1>
	<form>
<fieldset>
    <legend> Example </legend>
  <div>
  <p>
    <label> Enter Name:  
    <input type = "text" placeholder = "Placeholder" value = "Enter Name">
    </label>
  </p>
  <p>
    <label> Enter Password: 
    <input type = "password" placeholder = "Enter Password">
    </label> 
  </p>
  <p>
    <label>
      Enter Phone Number: 
    <input type = "number" placeholder = "123456789">
    </label>
  </p>
  <p>
    <label>
      Enter Your email: 
    <input type = "email" id = "email" placeholder = "something@email.com">
    </label>
  </p>
  <p>
    <label>
      Your Description: 
      <textarea rows = "1" cols = "10" placeholder = "Your message."> </textarea>
    </label> 
  </p>
  <p>
    <label>
      Select Date:
    <input type = "date">
    </label>
  </p>
 <p>
    <input type = "submit">
	</p>
  </div>
  </fieldset>
</form>
</div>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>  
<script>
function printValue(sliderID, textbox) {
	 var x = document.getElementById(textbox);
	 var y = document.getElementById(sliderID);
	 x.value = y.value;
}
window.onload = function() { 
	printValue('rangeSlider', 'rangeValue');
}
</script>
</body>
</html>

Explanation:

In the above, we have created an example of how to align legend tag content to the center of the screen. We have used the following margin-left CSS property to align the tag in the center of the screen.

Output:

Following is the output of this example.

How to align Legend tag to center of the screen

Example 2: Align Legend tag to center of the screen using alignment property of legend tag.

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
        <title> Align Legend tag to center of screen using CSS </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
* { box-sizing: border-box; }
body { 
	background-color: #333; 
	font-size: 1rem; 
	font-family: 'Lato';
	font-weight: bold;
} 
fieldset {
  border: .5em solid lighten(deepskyblue, 30%);
  margin: 0 auto;
  padding: 2em;
  width: 75%;
}
form {
		position: relative;
		width: 640px;
		margin: 1% auto;
		border: .5em solid lighten(deepskyblue, 30%);
		border: .5em solid lighten(deepskyblue, 30%);
		border: .5em solid lighten(deepskyblue, 30%);
		border: .5em solid lighten(deepskyblue, 30%);
		box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
		background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1));
		background-color: #333;
}
form:before {
		box-sizing: border-box;
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		border: .5em solid lighten(deepskyblue, 30%);
		font-family: 'Permanent Marker', cursive;
		font-size: 2.2em;
		color: rgba(238, 238, 238, 0.7);
		text-align: center;
		padding-top: 20px;
}
h1 { 
font-size: 1.5em; 
color: whitesmoke; 
font-weight: 400; 
margin-bottom: 0.2em; 
margin-top: 0; 
font-family: 'Permanent Marker', 
cursive; text-slign: center; 
text-align: center;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1),
    0px 18px 23px rgba(0, 0, 0, 0.1);
	}
p { font-size: 1em; color: whitesmoke; margin-bottom: 1em; margin-top: 0; }
a { color: dodgerblue; text-decoration: none; border-bottom: 1px dotted; }
a:hover { color: tomato; }
.container { 
	max-width: 1060px; 
	height: 100%;
	margin: 0 auto; 
	padding: 1em;
}
form > div {
	display: flex;
	flex-wrap: wrap;
}
form > div > p {
	min-width: 33.33%;
	padding: 6px;
}
form p { color: tomato; }
form > div { margin-bottom: 1em; }
button {
	color: inherit;
	font: inherit;
	margin: 0;
	margin-top: 0.5em;
}
input {
	color: inherit;
	font: inherit;
	margin: 0;
	margin-top: 0.5em;
}
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
	margin-top: 0.5em;
}
label {
	display: block;
	margin: 0.25em 0;
	font-weight: bold;
	font-family: 'Permanent Marker', cursive;
	color: rgba(238, 238, 238, 0.7);
}
button {
	-webkit-appearance: button;
	cursor: pointer;
}
input[type=button] {
	-webkit-appearance: button;
	cursor: pointer;
}
input[type=submit],
{
	-webkit-appearance: button;
	cursor: pointer;
}
input {
	line-height: normal;
}
textarea { line-height: 1.25em; }
input[type=text] {
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 2px;
	vertical-align: middle;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.5em 0.6em;
	margin-bottom: 0.5em;
}
input[type=password] {
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 2px;
	vertical-align: middle;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.5em 0.6em;
	margin-bottom: 0.5em;
}
input[type=email] {
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 2px;
	vertical-align: middle;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.5em 0.6em;
	margin-bottom: 0.5em;
}
input[type=date] {
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 2px;
	vertical-align: middle;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.5em 0.6em;
	margin-bottom: 0.5em;
}
textarea {
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
	border-radius: 2px;
	vertical-align: middle;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.5em 0.6em;
	margin-bottom: 0.5em;
}
input[readonly] {
	background-color: #eee;
	color: #777;
	border-color: #ccc;
}
textarea[readonly] {
	background-color: #eee;
	color: #777;
	border-color: #ccc;
}
input:focus:invalid {
	color: #b94a48;
	border-color: #e9322d;
}
textarea:focus:invalid {
	color: #b94a48;
	border-color: #e9322d;
}
	select:focus:invalid {
	color: #b94a48;
	border-color: #e9322d;
	}
input[type="submit"] {
	display: inline-block;
	padding: 8px 12px;
	color: white;
	 width: 160px;
	background-color: tomato;
	border: 0;
	cursor: pointer;
	transition: all 300ms ease;
}
button {
	display: inline-block;
	padding: 8px 12px;
	color: white;
	background-color: tomato;
	border: 0;
	cursor: pointer;
	transition: all 300ms ease;
  border-radius: 1rem;
  font-size: .8rem;
  text-decoration: none;
}
input[type="submit"]:hover {
	cursor: pointer;
  text-align: center;
  margin: 0 auto;
  width: 160px;
  color: #fff;
  background-color: #ff73b3;
  opacity: 1;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
input[type="button"]:hover {
	background-color: royalblue;
}

legend {
       padding: 2px;
        color: tomato; 
       font-size: 20px;
      text-transform: capitalize;
        }
</style>
<body>
<div class = "container">
	<h1> Align Legend tag to center of screen using align attribute </h1>
	<form>
<fieldset>
   <legend align = "center"> Example : </legend>
  <div>
  <p>
    <label> Enter Name:  
    <input type = "text" placeholder = "Placeholder" value = "Enter  Name">
    </label>
  </p>
  <p>
    <label> Enter Password: 
    <input type = "password" placeholder = "Enter Password">
    </label> 
  </p>
  <p>
    <label>
      Enter Phone Number: 
    <input type = "number" placeholder = "123456789">
    </label>
  </p>
  <p>
    <label>
      Enter Your email: 
    <input type = "email" id = "email" placeholder = "something@email.com">
    </label>
  </p>
  <p>
    <label>
      Your Description: 
      <textarea rows = "1" cols = "10" placeholder="Your message."> </textarea>
    </label> 
  </p>
  <p>
    <label>
      Select Date:
    <input type = "date">
    </label>
  </p>
 <p>
    <input type = "submit">
	</p>
  </div>
  </fieldset>
</form>
</div>
</body>
</html>

Explanation:

In the above, we have created an example of how to align legend tag content to the center of the screen. For this, we have used the legend tag center alignment property.

Output:

Following is the output of this example.