Rumah > hujung hadapan web > html tutorial > Bagaimana untuk mencapai kesan pemusatan dalam halaman web html (perkongsian kod)

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

奋力向前
Lepaskan: 2021-08-12 00:13:28
asal
101690 orang telah melayarinya

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.

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

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 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>
Salin selepas log masuk

Bagaimana untuk mencapai kesan pemusatan dalam halaman web html (perkongsian kod)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>
Salin selepas log masuk

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

  style="max-width:90%"
Salin selepas log masuk

Contoh kod cara mencapai pemusatan kesan dalam halaman web html

<div align="center">
<input value="帐号"size="20">
</div>
Salin selepas log masuk


Penyampaian kod









网页制作







 

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

Salin selepas log masuk

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.

Bagaimana untuk mencapai kesan pemusatan dalam halaman web html (perkongsian kod)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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Cadangan popular
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan