数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
伦理研究使用 CSS 中的 margin 属性设置文本居中
我们可以使用 CSS 的 margin 属性将块级元素居中，但需要设置该元素的 CSS 宽度属性。自动 值是为 边距 属性设置的。
让我们看一些示例，以使用 CSS 边距属性将元素居中 −
建立一个符号和居中对齐
在此示例中，我们使用 CSS 创建了一个符号。使用值 自动 的 边距 属性将对其居中 −
div {
width: 50%;
margin: 10px auto;
border:4px solid black;
}
示例
让我们看一个使用边距属性将一个符号居中对齐的示例 −
<!DOCTYPE html>
<html>
<head>
<title>Center Alignment using CSS Margin</title>
<style>
#yinyangSymbol {
width: 100px;
height: 50px;
background: #fff;
border-color: #000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yinyangSymbol::before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #fff;
border: 18px solid #000;
border-radius: 100%;
width: 14px;
height: 14px;
}
#yinyangSymbol::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #000;
border: 18px solid #fff;
border-radius:100%;
width: 14px;
height: 14px;
}
div{
width: 50%;
margin: 10px auto;
border:4px solid black;
}
#text {
border: 4px solid black;
background-color: grey;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div>
<div id="yinyangSymbol"></div>
</div>
<div id="text">Be Centered & Balanced</div>
</div>
</body>
</html>
让我们看另一个使用 CSS 边距属性将元素居中的示例 −
将 Div 居中
在此示例中，我们使用值 自动 的 边距 属性居中了 div。我们有 3 个屏幕，即 div −
<div class="screen screen1">Screen 70%</div> <div class="screen screen2">Screen 50%</div> <div class="screen screen3">Screen 30%</div>
所有以上内容都使用 边距 属性对齐 −
.screen {
padding: 10px;
margin: 10px auto;
text-align: center;
color: white;
border-radius: 0 0 50px 50px;
border: 4px solid #000;
}
示例
让我们看一个在 HTML 网页上将 div 居中对齐的示例 −
<!DOCTYPE html>
<html>
<head>
<title>Center Alignment using CSS Margin</title>
<style>
.screen{
padding: 10px;
margin: 10px auto;
text-align: center;
color: white;
border-radius: 0 0 50px 50px;
border: 4px solid #000;
}
.screen1 {
background-color: #f06d06;
width: 70%;
}
.screen2 {
background-color: #48C9B0;
width: 50%;
}
.screen3 {
background-color: #DC3545;
width: 30%;
}
</style>
</head>
<body>
<div>
<div class="screen screen1">Screen 70%</div>
<div class="screen screen2">Screen 50%</div>
<div class="screen screen3">Screen 30%</div>
</div>
</body>
</html>
更新日期：30-10-2023
2K+ 浏览
广告