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>标签内创建块状元素。