css H1 inline-block 網頁置中問題

css3

ppp896 2022-02-19 11:16:11 ‧ 992 瀏覽

分享至

H1標籤
CSS語法哪個方法比較好置中
以下是目前我做的方法
display: inline-block;
margin-left: 50%;
transform: translateX(-50%);
background: linear-gradient(-70deg, transparent 20px, #000 0);

謝謝-

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Felix

iT邦研究生 2 級 ‧ 2022-02-19 12:35:01

最佳解答

Using Table

當 margin 設為 auto 時，元素需要寬度才會生效，但是每個元素的寬度不一定會相同，也不可能每次都各自手動調整，因此能透過表格的特性（自動寬度），來達成置中的效果。

h1 {
    display: table;
    margin: auto;
}

Using Parent Element

因為 text-align 會生效於所有 inline 元素，因此只要子元素是 inline 元素，也能達成置中的效果。

<div>
    <h1></h1>
</div>

div {
    text-align: center;
}

h1 {
    display: inline-block;
}

兩者擇一。
推薦前者，因為比較簡單。

回應 1
分享
檢舉

ppp896 iT邦新手 4 級 ‧ 2022-02-19 14:09:09 檢舉

感恩,謝謝

登入發表回應

我要發表回答

立即登入回答