css H1 inline-block 網頁置中問題
H1標籤
CSS語法哪個方法比較好置中
以下是目前我做的方法
display: inline-block;
margin-left: 50%;
transform: translateX(-50%);
background: linear-gradient(-70deg, transparent 20px, #000 0);
謝謝-
已邀請的邦友 {{ invite_list.length }}/5
當 margin 設為 auto 時，元素需要寬度才會生效，但是每個元素的寬度不一定會相同，也不可能每次都各自手動調整，因此能透過表格的特性（自動寬度），來達成置中的效果。
h1 {
display: table;
margin: auto;
}
因為 text-align 會生效於所有 inline 元素，因此只要子元素是 inline 元素，也能達成置中的效果。
<div>
<h1></h1>
</div>
div {
text-align: center;
}
h1 {
display: inline-block;
}
兩者擇一。
推薦前者，因為比較簡單。
iThome鐵人賽
看影片追技術