数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 CSS 居中块级元素？
对齐指的是定位网页元素，例如按钮、内容框、文本和图像。在网页设计中，对齐就是将各个部分正确地或成一条直线排列。在某些网页设计策略中，会故意打破对齐来产生不对称的设计。另一方面，组件将以某种方式对齐。
网页的布局在很大程度上由元素的位置决定。一个美观的网站，其元素的放置和组织都经过精心设计。CSS 的 position 属性将使这个过程变得更简单。它有助于创建各种网站布局。如果各个部分正确对齐，你的网站将更容易阅读。对象和信息的正确对齐对网站的整体外观有重大影响。网站元素（包括文本块和图片占位符）的精心对齐，体现了专业性，同时也具有美观和宁静的视觉效果。
响应式设计的一个关键组成部分是网站上元素的对齐。这是因为，当网站从较小屏幕尺寸的设备（如智能手机）加载时，网站的外观和结构会根据你的预期发生变化。在本文中，我们将讨论如何使用 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>
居中对齐块级元素的方法
下面讨论了一些居中对齐块级元素的方法。
方法 1
手动指定元素的宽度。这是因为块级元素的默认宽度是整个屏幕的 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>
方法 2
要居中对齐块级元素，我们可以简单地使用 <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> 标签内创建块级元素。
334 次浏览
