Bagaimana untuk mencapai kesan pemusatan dalam halaman web html (perkongsian kod)

Dalam artikel sebelumnya "Adalah berbaloi untuk mengetahui struktur asas halaman web html semasa kajian (Ringkasan) ", saya memperkenalkan anda kepada struktur asas html yang sangat jelas ini, saya jamin anda tidak akan keliru. Artikel seterusnya di bawah akan berkongsi dengan anda bagaimana untuk mencapai kesan pemusatan dalam halaman web HTML Rakan yang memerlukan boleh merujuknya.

Elemen berpusat html boleh dikelaskan sebagai [sebaris] - [blok] - [blok sebaris]

Biasanya elemen blok terpakai: <div> <p> </p> <h1>.....<h6> <ol> </ol> <ul> <dl> <table> <address> <blockquote> <form> <p>Elemen sebaris yang biasa digunakan: <code><a> <span> <br> <i> <em> <strong> <label> <q> <cite> <code> <var></var>

Elemen blok sebaris yang biasa digunakan: <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/551/855/470/1628698039773572.jpg" class="lazy" alt="Bagaimana untuk mencapai kesan pemusatan dalam halaman web html (perkongsian kod)" > <input>

Spesifikasi elemen peringkat blok : Menggunakan text-align：center akan menjadi tidak sah.

Jika anda perlu menetapkan tengah, tetapkan nilai jidar di sebelah kiri dan kanan kepada "auto".

Jadi baki kawasan elemen di sebelah kiri dan kanan dibahagikan sama rata, iaitu kawasan di kedua-dua belah elemen masing-masing menyumbang 50%, kemudian elemen itu berpusat di kiri dan kanan. .

Elemen tahap blok dengan lebar berubah

Biasanya terdapat tiga cara untuk mencapai pemusatan

1 melalui elemen table; >

2. Tetapkan kaedah

untuk menetapkan jenis paparan kepada elemen sebaris; . display: inline

position:relative teg memusatkan tajuk

<h1></h1>Kesan kod

<p align="center">关关和鸣的雎鸠，栖息在河中的小洲</p>

Cara untuk memusatkan imej img

Secara umumnya, anda boleh menggunakan atribut ", atau atribut kedudukan" dalam CSS Berpusat.

img mentakrifkan teg induk untuk memusatkan kandungan dalam teg induk ini, kemudian img secara semula jadi akan dipusatkantext-align:centermargin:0 auto

Cara memusatkan kotak input input

<p align="center">img……</p>

Cara menyarangkan div di luar input dan memusatkan elemen di dalam div

  style="max-width:90%"

Contoh kod cara mencapai pemusatan kesan dalam halaman web html

<div align="center">
<input value="帐号"size="20">
</div>

Penyampaian kod

 

 

 
 


                

                php搜一下
            







   图片链接







    图片链接







    图片链接







    图片链接







    图片链接

Jika anda mahu menggunakan bahasa html sahaja , pilihannya ialah Jika anda terlibat dalam reka bentuk web, adalah disyorkan agar anda menggunakan bahasa css untuk mengubah suai halaman web.

Pembelajaran yang disyorkan:

Tutorial video html

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan pemusatan dalam halaman web html (perkongsian kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!