kod css untuk pemusatan div

下次还敢
Lepaskan: 2024-04-25 14:24:17
asal
572 orang telah melayarinya

Gunakan text-align: tengah ke tengah div secara mendatar dalam HTML Langkah-langkah untuk memusatkan menegak adalah seperti berikut: Tetapkan ketinggian div dan ketinggian garis menegak. Gunakan jidar: 0 automatik untuk memusatkan kandungan secara menegak. Pemusatan juga boleh dicapai menggunakan flexbox atau susun atur grid.

kod css untuk pemusatan div

Kod CSS untuk div berpusat

Div berpusat

Dalam HTML, div ialah elemen peringkat blok yang dijajarkan secara mendatar ke kiri pada halaman secara lalai. Penjajaran tengah boleh dicapai menggunakan sifat CSS.

Pemusatan mendatar

Gunakan atribut text-align untuk memusatkan kandungan div secara mendatar. text-align属性可以水平居中div的内容。

<code class="css">div {
  text-align: center;
}</code>
Salin selepas log masuk

垂直居中

垂直居中div的内容比较复杂,需要使用以下步骤:

  1. 设置div的高度和一个垂直线。
  2. 使用margin
    <code class="css">div {
      height: 200px;  /* 设置div的高度 */
      line-height: 200px;  /* 设置垂直线的高度 */
      margin: 0 auto;  /* 将内容垂直居中 */
    }</code>
    Salin selepas log masuk
Berpusat secara menegak

Kandungan div berpusat menegak adalah lebih rumit dan memerlukan langkah berikut:

  1. Tetapkan ketinggian div dan garis menegak.

  2. Gunakan atribut margin untuk memusatkan kandungan secara menegak.

    <code class="css">div {
      display: flex;
      justify-content: center;
      align-items: center;
    }</code>
    Salin selepas log masuk
    Gunakan flexbox ke tengah

    Anda juga boleh menggunakan susun atur flexbox untuk memusatkan div. 🎜
    <code class="css">div {
      display: grid;
      place-items: center;
    }</code>
    Salin selepas log masuk
    🎜🎜Gunakan susun atur grid ke tengah 🎜🎜🎜 susun atur grid juga boleh digunakan untuk tengah div. 🎜rreeee

Atas ialah kandungan terperinci kod css untuk pemusatan div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan