CSS使用text-align屬性設(shè)置文字對齊方式;text-align:center,這樣就設(shè)置了文字居中對齊;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 水平居中</title>
<style>
.box {
background: pink;
text-align:center;
}
h1 {text-align:center;}
</style>
</head>
<body>
<h1>我是標題</h1>
<div class="box" style="width: 200px;height: 100px;border: 3px solid green;">AAB文本BCC</div>
<div class="box" style="width: 100px;height: 50px;border: 3px solid green;">文字</div>
<p class="box">2021 年 01 月 01 號</p>
<a class="box" url="">aaaaa請單擊ccccccccc</p>
<table border="1">
<tr>
<td>A</td>
<td>行1,列2</td>
</tr>
<tr>
<td>行2,列1</td>
<td>行2,列2</td>
</tr>
</table>
</body>
</html>
做一個html文檔,網(wǎng)頁元素包括:h1, 一個div,一個div,一個p(段落),一個鏈接(a),一個表格;
定義了CSS樣式類box,其中指定了背景色為pink,文字對齊為居中對齊;定義了h1元素的文字對齊方式為居中;
2個div引用了css類box;p和a也引用了樣式類box;
運行如下;
h1的文字居中對齊了;
2個div也是;
p元素沒有指定寬度的情況下默認占一整行,文字也居中對齊了;
a元素指定文字居中對齊看上去沒有意義,a元素的默認寬度自動調(diào)整為其中文字占據(jù)的寬度;文章來源:http://www.zghlxwxcb.cn/news/detail-700417.html
表格沒有指定單元格的文字對齊方式,<td>A</td> 這個單元格的文字寬度不夠單元格寬度,默認是居中對齊的;文章來源地址http://www.zghlxwxcb.cn/news/detail-700417.html
到了這里,關(guān)于CSS文字居中對齊學習的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!