Rumah >hujung hadapan web >tutorial css >Bolehkah Inline-Block dengan Text-Align: Center Gantikan Paparan: Jadual untuk Mendatar Tengah?

Bolehkah Inline-Block dengan Text-Align: Center Gantikan Paparan: Jadual untuk Mendatar Tengah?

Susan Sarandon
Susan Sarandonasal
2024-12-24 19:13:21290semak imbas

Can Inline-Block with Text-Align: Center Replace Display: Table for Horizontal Centering?

Paparan Tengah dengan Blok Sebaris: Penyelesaian Alternatif

Apabila menjajarkan elemen berpusat secara mendatar dengan balut, pendekatan biasa ialah menggunakan paparan: jadual untuk pembalut. Walau bagaimanapun, sesetengah mungkin lebih suka penyelesaian menggunakan paparan: blok atau paparan: blok sebaris.

Penyelesaian awal mengemukakan isu: "balut" paparan yang diperlukan: jadual untuk mencapai penjajaran yang diingini. Pendekatan yang diubah suai muncul dengan pengenalan penjajaran teks: tengah digunakan pada elemen badan dan paparan: blok sebaris diperuntukkan pada balut. Dengan mengalih keluar paparan: jadual, kami mendapat penyelesaian alternatif yang menjajarkan elemen berpusat dengan berkesan tanpa mengenakan had lebar tetap.

Kod Kemas Kini:

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

Pengubahsuaian ini mengekalkan penjajaran yang diingini sambil menawarkan pendekatan yang lebih bersih dan berpotensi pilihan untuk senario tertentu.

Atas ialah kandungan terperinci Bolehkah Inline-Block dengan Text-Align: Center Gantikan Paparan: Jadual untuk Mendatar Tengah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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