极客教程CSS 如何使块状元素居中
定位你的元素，如按钮、内容框、文本和图像，这就是对齐的意义所在。在网页设计中，对准任何东西都是将各部分正确地排成一排或排成一条直线。在某些网页设计策略中，排列被故意打破，以产生不对称的设计。另一方面，所有的部件都会以某种方式对齐。
网页的布局在很大程度上是由元素的位置指定的。一个好看的网站是一个拥有战略性放置和组织良好的元素的网站。CSS的位置属性将使你的这个过程更加简单。它有助于创建各种网站的布局。如果各部分正确对齐，你的网站将更容易阅读。对象和信息的正确对齐对你网站的整体外观有很大影响。你的网站元素的细致排列，包括文本块和照片占位符，散发着专业的气息，在审美上也是令人愉快和宁静的。
响应式设计的一个重要组成部分是你网站上的项目的排列。这是因为当网站从屏幕尺寸较小的设备（如智能手机）上加载时，网站的外观和结构将改变为你的意图。在这篇文章中，我们将讨论如何使用CSS来对齐块元素。
什么是块状元素
块状元素是那些在新行开始时显示的元素。块状元素占据了它所包含内容的整个宽度。与内联不同，这些元素有顶部和底部的空白。只有body标签被允许包含块级的组件。与内联组件相比，块级元素产生了一个更大的结构。块元素的例子有<div>、<article>、<section>、<li>、<ul>、<form>、<p>等。
例子
<!DOCTYPE html>
<html>
<head>
<title> Block Elements </title>
<style>
*{
margin: 11px;
padding: 5px;
letter-spacing: 1px;
}
h1{
color: green;
text-decoration: underline;
}
div{
background-color: #FFFF00;
width: 30%;
}
p{
background-color: #FF0000;
width: 30%;
}
article{
background-color: #00FF00;
width: 30%;
}
section{
background-color: blue;
width: 30%;
}
</style>
</head>
<body>
<h2> Block Elements </h2>
<div> This is a div element. </div>
<p> This is a p element. </p>
<article> This is an article element. </article>
<section> This is a section element. </section>
</body>
</html>
块级元素集中对齐的方法
下面将讨论一些集中对齐块状元素的方法。
方法一
手动指定元素的宽度。这是因为块状元素的默认宽度是整个屏幕的100%。然后，指定用于对齐块状元素周围剩余空间的边距。
例子
<!DOCTYPE html>
<html>
<head>
<title> Alignment of Block elements </title>
<style>
*{
margin: 11px;
padding: 5px;
box-sizing: border-box;
}
body {
background: cyan;
}
.container {
background: #000000;
color: #FFFFFF;
text-align: center;
width: 350px;
margin: 10rem auto;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Block Elements </h2>
<div class= "container">
<h3> This is a div element which is centrally aligned. </h3>
</div>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<title> Alignment of Block elements </title>
<style>
*{
margin: 11px;
padding: 2px;
box-sizing: border-box;
}
body {
background: #FFFF00;
}
.box {
background: #040220;
color: rgb(238, 238, 238);
text-align: center;
width: 480px;
height: 30px;
margin: 10px auto;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Block Elements </h2>
<div class= "box">
<h3> This is an example. </h3>
</div>
<div class= "box">
<h3> This is an example. </h3>
</div>
</body>
</html>
方法二
为了使块元素居中对齐，我们可以简单地使用<center>标签。所有在<center>标签内的元素都将被居中对齐。
例子
<!DOCTYPE html>
<html>
<head>
<title> Alignment of Block elements </title>
<style>
*{
margin: 11px;
padding: 5px;
box-sizing: border-box;
}
body {
background: cyan;
}
.container {
background: #000000;
color: #FFFFFF;
text-align: center;
width: 60%;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Block Elements </h2>
<h2> div element </h2>
<center>
<div class= "container">
<h3> This is a div element which is centrally aligned. </h3>
</div>
</center>
<h2> section element </h2>
<center>
<div class= "container">
<h3> This is a section element which is centrally aligned. </h3>
</div>
</center>
</body>
</html>
结论
用户体验将从简单的网页设计中大大受益。如果人们在访问你的网站时有良好的体验，他们就更有可能愿意与你互动。当信息干净的时候，阅读和发现信息也会更简单。如果你的页面难以理解，人们会访问竞争对手的网站。你希望你的网站的访问者一旦到了那里就能采取行动。而不应该是离开。在这篇文章中，我们已经讨论了集中对齐块级元素的两种方法。其中一种方法是指定元素的外部宽度和边距，而另一种方法是在<center>标签内创建块状元素。