Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Rumah > hujung hadapan web > tutorial css > teks badan

Bagaimana untuk Memusatkan Teks Secara Menegak dalam Elemen Div Responsif?

Patricia Arquette

Lepaskan： 2024-11-09 04:20:02

asal

439 orang telah melayarinya

How to Vertically Center Text in a Responsive Div Element?

Penjajaran Teks Menegak dalam Elemen Div Responsif

Apabila berurusan dengan kandungan dalam bekas DIV bersaiz dinamik, menjajarkan teks secara menegak boleh menjadi mencabar. Soalan ini meneroka cara untuk memusatkan teks secara menegak dalam elemen DIV tanpa mengira ketinggiannya.

Pernyataan Masalah:

Pertimbangkan struktur HTML berikut:

<body>
    <div>

Salin selepas log masuk

Bagaimanakah teg H1 boleh dipusatkan secara menegak dalam DIV, tanpa mengira DIV ketinggian?

Penyelesaian:

Penyelesaian paling berkesan melibatkan memanfaatkan sifat paparan. Dengan menetapkan elemen pembalut sebagai jadual, kami mendayakan penggunaan vertical-align:middle untuk memusatkan elemen:

<body>
    <div>
        Text

Salin selepas log masuk

body {width: 100%; height: 100%;}  /* For visualization purposes */

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

Salin selepas log masuk

Ujian:

Penyelesaiannya telah diuji pada pelbagai platform dan pelayar, termasuk:

Windows XP Profissional versão 2002 Service Pek 3

Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safar

Windows 7 Home Edition Service Pack 1

Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m

Linux Ubuntu 12.04

Firefox 12.0

Chromium 18.0.1025.151 (Pembangun Binaan 130497 Linux)

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Teks Secara Menegak dalam Elemen Div Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimanakah saya menetapkan kelegapan untuk latar belakang div tanpa menjejaskan elemen yang terkandung dalam IE 8? Artikel seterusnya：Bagaimana untuk Memohon Warna Bergantian untuk Menyenaraikan Item dengan Kelas "Ibu Bapa" Menggunakan Pemilih nth-child?

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

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

1816

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

1976

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1665

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...