首頁 > web前端 > html教學 > html網頁中如何實現居中效果(程式碼分享)

html網頁中如何實現居中效果(程式碼分享)

奋力向前
發布: 2021-08-12 00:13:28
原創
101691 人瀏覽過

之前的文章《學習中值得了解html網頁的基本結構(總結)》中,給大家介紹了一個html基本結構具體非常清楚,有了這個保證你不會顛倒四。以下下篇文章跟大家分享一下html網頁中如何實現居中效果,有需要的朋友可以參考一下。

html網頁中如何實現居中效果(程式碼分享)

html居中的元素可以分類為【行內】-【塊狀】-【行內塊狀】

常用的塊狀元素:<div> <p> </p> <h1>.....<h6> <ol> </ol> <ul> <dl> <table> <address>ul> </address> <dl> <table> <address> ; <blockquote> <form> <p>常用的行內元素:<code><a> <span> <br> <i> <em> <strong> <label> <q> <cite> <code> <var></var>

常用的行內區塊狀元素:<img alt="html網頁中如何實現居中效果(程式碼分享)" > <input>

##html網頁中如何實現居中效果(程式碼分享) 區塊級元素指定:使用text-align:center就無效了。

如果需要設定居中,透過設定左右兩邊的margin值為「auto

」來實現。

所以左右兩邊元素剩餘區域各自均分,也就是元素兩側的區域各佔50%,那麼元素就左右居中了。

寬度不固定的區塊級元素

通常有三種方式來實作居中

1、透過table

元素來實作;

2、設定 display: inline

方法,將顯示型別設為行內元素;

3、設定position:relative

利用相對定位的方式,將元素向左偏移 50%來實現居中。

標籤讓標題居中

<p align="center">关关和鸣的雎鸠,栖息在河中的小洲</p>
登入後複製
程式碼效果

html網頁中如何實現居中效果(程式碼分享)

img圖片居中的方法

#一般來說可以用CSS中的「text-align:center屬性,margin:0 auto

或定位屬性」就可以居中。


img定義一個父標籤,讓這個父標籤裡面的內容居中,那麼img自然就居中

<p align="center">img……</p>
登入後複製
input輸入框居中的方法

#

  style="max-width:90%"
登入後複製
input外部巢狀div,設定div內部元素居中的方法

<div align="center">
<input value="帐号"size="20">
</div>
登入後複製
html網頁中如何實作居中效果程式碼範例









网页制作




html網頁中如何實現居中效果(程式碼分享)

登入後複製
程式碼效果圖

html網頁中如何實現居中效果(程式碼分享)

#想要單純用html語言的話,那選擇就是
如果你是搞網頁設計的話,建議你用css語言來修飾網頁。

推薦學習:Html影片教學

####

以上是html網頁中如何實現居中效果(程式碼分享)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板