HTML學習筆記——各類居中對齊

時間 2019-11-24

標籤 html 學習筆記各類居中對齊欄目 HTML 简体版

原文原文鏈接

0.前言

水平居中基本方法——指定塊的寬度並設定塊的左右外邊距爲auto，上下外邊距可取0，那麼該塊可以在父元素中水平居中。

樣式例如如下：

1： margin:0px auto

2： margin-left:auto; margin-right:auto;

垂直居中基本方法——設定塊的上下內邊距相等。

樣式例如如下：

padding-top:20px; padding-bottom:20px;

1.div居中對齊

【HTML】

<!DOCTYPE html>
<html>
<head>
<style>
#all{
    margin:0px auto;
    width:500px; /* 必須制定寬度 */
    height:200px;
    background-color:blue;
}
</style>
</head>
<body>
<div id="all">
<div>
</body>
</html>

【效果】

【1】body中有一個ID爲all的塊，該塊的寬度爲500px，高度爲200px。經過margin:0px auto在body中水平居中。

圖1 div居中

2.div中文字居中

【HTML】

<!DOCTYPE html>
<html>
<head>
<style>
#all{
    margin:0px auto;
    width:500px; /* 必須制定寬度 */
    height:200px;
    background-color:blue;
}
#string{
    margin:0px auto;
    width:300px;
    height:100px;
    background-color:red;
    text-align:center; /* 文字居中 */
    font-size:32px; /* 文字大小 */
    color:white; /* 文字顏色 */
}
</style>
</head>
<body>
<div id="all">
<div id="string">center<div>
<div>
</body>
</html>

【效果】

【1】body中有一個ID爲all的塊，該塊的寬度爲500px，高度爲200px。在body中水平居中。

【2】在名稱爲all的塊中有一個ID爲string的塊。經過margin:0px auto使得該塊在父元素中水平居中。

text-align:center使得html

圖2 div 文字水平居中

3 div圖片居中

【HTML】

<!DOCTYPE html>
<html>
<head>
<style>
#all{
    margin:0px auto;
    width:500px; /* 必須制定寬度 */
    height:200px;
    background-color:blue;
}
#string{
    margin:0px auto;
    width:300px; /* 必須制定寬度 */
    height:100px;
    background-color:red;
    text-align:center; /* 文字居中 */
    font-size:32px; /* 文字大小 */
    color:white; /* 文字顏色 */
}
#image{
    margin:0px auto;
    width:300px; /* 必須制定寬度 */
    background-color:white;
    text-align:center; /* 圖像居中 */
    padding-top:20px; /* 圖像上填充 */
    padding-bottom:20px; /* 圖像下填充 */
}
</style>
</head>
<body>
<div id="all">
<div id="string">center</div>
<div id="image"><img src="loader.gif"></div>
</div>
</body>
</html>

【效果】

【1】圖片在div中居中的方法和文字一樣，父div中設定text-align:center就能夠。

【2】假設需要圖片垂直居中，那麼可以設定父div的上下內邊距。好比 padding-top:20px;padding-bottom:20px;

圖3 div中圖像水平居中

4.表格內容居中

【HTML】——HTML寫法

<!DOCTYPE html>
<html>
<head>
<style>
#all{
    margin:0px auto;
    width:500px; /* 必須制定寬度 */
    height:200px;
    background-color:blue;
}
</style>
</head>
<body>
<div id="all">
<!-- 表格在父窗口中居中 -->
<table width="80%" align="center" border="1">
<tbody>
<!-- 單元格居中 -->
<tr height="50px"><td align="center">文字居中</td></tr>
<tr height="50px"><td align="center"><img src="loader.gif"></td></tr>
</tbody>
</table>
</div>
</body>
</html>

【效果】

【1】<table align="center" > 使得表格在父div中水平居中。

【2】<td align="center"> 使得單元格中的內容水平居中，請注意單元格中的內容默認垂直居中。

圖4 表格內容居中——HTML寫法

【HTML】CSS寫法

<!DOCTYPE html>
<html>
<head>
<style>
#all{
    margin:0px auto;
    width:500px; /* 必須制定寬度 */
    height:200px;
    background-color:blue;
}
/* 設置邊框 */
table, th, td{
    border: 1px solid black;
}
/* 設置table位置 */
table{
    margin:0px auto; /* 效果等同 <tabel align="center">*/
    width:80% /* 必須制定寬度 */
}
/* 單元格對齊 */
td{
    text-align:center;
}
</style>
</head>
<body>
<div id="all">
<table>
<tbody>
<tr height="50px"><td>文字居中</td></tr>
<tr height="50px"><td><img src="loader.gif"></td></tr>
</tbody>
</table>
</div>
</body>
</html>

【效果】

【1】table{margin:0px auto;}，使得表格在父div中水平居中

【2】td{text-align:center;}，單元格內容水平居中，請注意td{text-align:center;}和<td align="center">有一樣效果。

【3】效果和如圖4所看到的。

參考資料

【1】爲你總結老生常談的 --- CSS居中

【2】實現DIV層內的文字垂直居中