資料結構
網路
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+ 瀏覽
廣告