我有這個 HTML 代碼：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Test Project</title>
</head>
<body>
<header>
<h1>MarioClub</h1>
</header>
</body>
</html>
使用這個 css 模塊：
header {
text-align: center;
position: fixed;
width: 100%;
color: black;
background: yellow;
border-width: medium;
border-color: black;
z-index: 1;
top: 0;
left: 0;
}
header h1 {
/*text-align: center;*/
padding: 10px 10px;
border: 8px solid black;
display: inline-block;
}
當我把“文本對齊：居中；” 進入“標題”選擇器，它也能作業。但是當我從標題中洗掉它并添加到“標題 h1”選擇器時，文本對齊不起作用。為什么它不起作用？
我認為它必須反過來作業，因為我想將“h1”的文本放在中心，但不是所有的“標題”文本。
當我將 text-aling 放入“header”選擇器時，它的作業方式是這樣的
就像這樣，當我將它放入“header h1”選擇器時
uj5u.com熱心網友回復：
把text-align上h1只對準里面的文本，而不是自己。把text-align上header對齊所有header的孩子。
uj5u.com熱心網友回復：
因為 inline-block 沒有獲得完整的父寬度，所以，雖然它的文本是居中的，但似乎不是。只需使用瀏覽器檢查器檢查 h1 元素，即可查看兩種情況的差異。
uj5u.com熱心網友回復：
根據property中的定義：https : //www.w3schools.com/cssref/pr_text_text-align.ASP
“該text-align屬性指定元素中文本的水平對齊方式。”
在元素內部，由于h1是 的子元素，因此header當您為header中心指定h1屬性時，也會發生這種情況inline-block（這會更改默認行為），否則會h1擴展到所有可用的水平空間，因此邊框將跨越所有頁面.
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/348821.html