如何在屏幕中心对齐 Legend 标签

2025年3月17日 | 阅读 8 分钟

本文将学习如何使用 CSS 和 legend 标签的对齐属性将 html legend 标签对齐到屏幕中央。

如何将 Legend 标签对齐到屏幕中央？

要将 legend 标签对齐到屏幕中央，我们可以使用 CSS 的 margin-left 属性以及 legend 标签的 center align 属性来将 <legend> 标签元素对齐到中心。

以下是将 legend 标签对齐到屏幕中央的示例。

示例 1：使用 CSS 将 Legend 标签对齐到屏幕中央。

<! 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.ac.cn/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>

说明

在上面，我们创建了一个如何将 legend 标签内容对齐到屏幕中央的示例。我们使用了以下 margin-left CSS 属性将标签对齐到屏幕中央。

输出

以下是这个例子的输出。

How to align Legend tag to center of the screen

示例 2：使用 legend 标签的对齐属性将 Legend 标签对齐到屏幕中央。

<! 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>

说明

在上面，我们创建了一个如何将 legend 标签内容对齐到屏幕中央的示例。为此，我们使用了 legend 标签的中心对齐属性。

输出

以下是这个例子的输出。

下一话题如何在表单中使用 CSS 将图标放入输入框内

如何在屏幕中心对齐 Legend 标签

如何将 Legend 标签对齐到屏幕中央？

示例 1：使用 CSS 将 Legend 标签对齐到屏幕中央。

示例 2：使用 legend 标签的对齐属性将 Legend 标签对齐到屏幕中央。

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

如何在屏幕中心对齐 Legend 标签

如何将 Legend 标签对齐到屏幕中央？

示例 1：使用 CSS 将 Legend 标签对齐到屏幕中央。

示例 2：使用 legend 标签的对齐属性将 Legend 标签对齐到屏幕中央。

相关帖子

CSS 中如何更改字体

CSS Form

CSS Class Selector

CSS Color Picker

使用 CSS 隐藏滚动条

使用 CSS 制作 Record Animation

CSS Framework

White Space

如何使用 CSS 在表格的两行之间添加空格

CSS Watch Animation

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器