数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 居中 <div> 标签？
对于网页布局，在 CSS 中居中 <div> 至关重要。居中 div 的任务是每个开发人员在其职业生涯中的某个时刻都会遇到的，如果不是每天的话。每个人都有一个方便的方法，但对于初学者来说，它偶尔会令人烦恼。
这些 CSS 方法提高了网页设计的视觉吸引力和可用性，这些方法确保了动态和平滑的居中效果。在查看这些方法之前，让我们先快速了解一下 div 标签。
HTML div 标签
在 HTML 中，<div> 标签用作分隔符或部分。HTML <div> 标签用于对 HTML 元素进行分组，这些元素随后被赋予容器并被赋予 CSS 或 JavaScript 样式。class 或 id 属性使装饰 div 标签变得简单。
语法
以下是 HTML div 标签的语法：
<div>......</div>
示例
让我们看看下面的示例，我们将使用 flexbox 居中 div。
<!DOCTYPE html>
<html>
<head>
<style>
.tp {
height: 300px;
background: #D5F5E3;
display: flex;
align-items: center;
color: #DE3163;
font-family: verdana;
justify-content: center;
}
.tp1 {
background-color: #CCD1D1;
width: 150px;
height: 50px;
}
</style>
</head>
<body>
<div class="tp">
<div class="tp1">WELCOME TO TUTORIALSPOINT</div>
</div>
</body>
</html>
当我们运行以上代码时，它将生成一个包含 div 框的输出，其中一个居中并在网页上显示。
示例
考虑另一种情况，我们将使用 CSS Justify-Content 属性
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #D5F5E3;
}
.tp {
margin: 100px;
border: 1px solid #17202A;
display: flex;
justify-content: center;
font-family: verdana;
color: #DE3163;
}
</style>
</head>
<body>
<div class="tp">
<p>MS Dhoni Lifts The WorldCup</p>
</div>
</body>
</html>
运行以上代码后，输出窗口将弹出，显示网页上居中的 div 文本。
示例
在下面的示例中，我们将使用网格居中 div。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #E8DAEF;
}
section {
font-family: verdana;
color: #DE3163;
font-size: 50px;
height: 450px;
display: grid;
place-items: center;
}
.tp {
background-color: yellow;
}
</style>
</head>
<body>
<section>
<div class="tp">WELCOME</div>
</section>
</body>
</html>
当我们运行以上代码时，它将生成一个输出，该输出包含在网页上显示的居中对齐的文本。
更新于： 2024年1月8日
297 次查看
广告