資料結構
網路
關係資料庫管理系統
作業系統
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 次瀏覽
