一、居中
1. 居中對齊元素
将塊元素水準居中對齊(像
<div>
) , 使用
margin: auto;
設定元素的寬度将阻止它伸展到容器的邊緣。
然後元素将占用指定的寬度，剩下的空間将平分在兩個邊距之間：
這個div是居中的。
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
} 注意：如果沒有設定寬度屬性，則居中對齊沒有效果 (或者設定到100%).
-
- *
2. 居中對齊文本
将元素内部的文本居中, 使用
text-align: center;
這些文本是居中的。
.center {
text-align: center;
border: 3px solid green;
} 3. 居中圖檔
居中圖檔, 使用
margin: auto;
并且設定為塊級元素:
img {
display: block;
margin: auto;
width: 40%;
} 二、左右
HTML代碼：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>程式設計字典</title>
</head>
<body>
<h2>右對齊</h2>
<p>如何正确定位元素與位置屬性的一個例子:</p>
<div class="right">
<p>在我年輕而脆弱的歲月裡，父親給了我一些我一直以來一直在思考的建議.</p>
</div>
</body>
</html> 1. 左右對齊 - 使用 position
對齊元素的一種方法是使用
position: absolute;
在我年輕而脆弱的歲月裡，父親給了我一些我一直以來一直在思考的建議。
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} 注意：
絕對定位元素從正常流中移除，并且可以重疊元素。
當使用
position
對齊元素時, 總是定義
margin
和
padding
為
<body>
元素. 這是為了避免不同浏覽器的視覺差異。
還有IE8和早期版本有一些問題, 當使用
position
. 如果容器元素有一個指定的寬度 (例如：
<div class="container">
) , 并且沒有設定!DOCTYPE, IE8 和早期版本将添加 17px 外邊距到右邊. 這似乎是一條為滾動條預留白間. 是以，總是聲明 !DOCTYPE 當使用
position
時:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
} 2. 左右對齊 - 使用 float
對齊元素的另一種方法是使用
float
屬性:
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} 提示：
當将元素使用浮動對齊時，總是為
body
元素定義邊距和填充。這是為了避免不同浏覽器的視覺差異。
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
} 效果圖：
三、垂直居中，水準居中
<html lang="en">
<head>
<meta charset="UTF-8">
<title>程式設計字典</title>
</head>
<body>
<h2>居中</h2>
<p>在這個執行個體中,
我們使用定位和transform屬性實作元素的水準和垂直居中:</p>
<div class="center">
<!-- <p>我是垂直居中的.</p> -->
<p>我水準垂直居中.</p>
</div>
<p>注意: transform屬性不支援IE8和更早的版本.</p>
</body>
</html> 1. 使用 padding
有許多方法來中心垂直CSS元素. 一個簡單的解決方案是使用頂部和底部
padding
:
.center {
padding: 70px 0;
border: 3px solid green;
} 水準和垂直居中, 使用
padding
text-align: center
垂直居中
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
} 2. 使用 line-height
另一個技巧是使用
line-height
屬性值等于
height
屬性值.
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
} 3. 使用 position & transform
如果
padding
line-height
不可選，第三種解決方案是使用定位和變換屬性：
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} 四、總結
本文基于Html基礎，主要介紹了Html中對齊的方式，對于對齊中的标簽做了詳細的講解，用豐富的案例 ，代碼效果圖的展示，幫助大家更好了解 。
最後，希望可以幫助大家更好的學習CSS3。
想學習更多Python網絡爬蟲與資料挖掘知識，可前往專業網站：
http://pdcfighting.com/![TestLink導出用例轉換工具(XML2Excel)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)