<html><head> <style type=&#34;text/css&#34;> .content { background-color: rgb(87, 87, 92);" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 如何將編輯好的html全部元素居中？

如何將編輯好的html全部元素居中？

時(shí)間：2024-01-09 09:36:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-01-09 09:36:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如何將編輯好的html全部元素居中？：

<div>居中 - 法1

通過(guò)中心點(diǎn)，計(jì)算坐標(biāo)來(lái)垂直居中。

<html><head> <style type="text/css"> .content { background-color: rgb(87, 87, 92); position: absolute; /* 水平居中 */ left: 50%; width: 30%; margin-left: -15%; /* 垂直居中 */ top: 50%; height: 30%; margin-top: -15%; } </style></head><body> <div class="content">Content goes here</div></body></html>

<div>居中 - 法2

<html><head> <style type="text/css"> #content { position: absolute; /* 垂直居中 */ top: 0; bottom: 0; height: 50%; /* 水平居中 */ left: 0; right: 0; width: 70%; margin: auto; background-color: red; } </style></head><body> <div id="content"> Content here</div></body></html>

垂直居中：vertical-align

設(shè)置單行或表格單元格內(nèi)元素，垂直方向上的位置，不能用塊級(jí)元素?？捎脤傩灾担?code>top middle bottom 等，詳細(xì)說(shuō)明.

<html><head> <style type="text/css"> .middle { vertical-align: middle; } </style></head><body> <div> An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment. </div></body></html>

文字居中：line-height

將文字line-height等于父容器的高度，即可垂直方向上居中；text-align可讓文在水平方向上居中。

<html><head> <style type="text/css"> #wrapper { height: 100px; background-color: red; } .content { /* 文字垂直居中 */ line-height: 100px; /* 文字水平居中 */ text-align: center; } </style></head><body> <div id="wrapper"> <p class="content">Content goes here</p> </div></body></html>

參考鏈接



關(guān)鍵詞：居中,編輯

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉