cari
Rumahhujung hadapan webtutorial csscss文本怎么设置水平对齐

css中可用text-align属性来设置文本的水平对齐方式,语法为“text-align:left|right|center|justify”;值left设置左对齐,right设置右对齐,center设置居中,justify设置两端对齐。

css文本怎么设置水平对齐

本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

在一个块级容器中,当一行中的行内级框的总宽度,小于容器的宽度时,通过 text-align属性来指定这些行内级框在行中的水平分布。

事实上,text-align属性是通过指定行框与哪个点对齐,来决定行内级框在行中如何进行水平分布。他只能应用于块级元素,它的最典型应用,就是指定段落中每一行内容的水平对齐方式。

段落是一个块级容器,容器中的每一行内容都会生成一个行框,就可以把段落看做是这些行框的堆叠。由于并非每一行的内容都能填满容器的宽度,因此,就可以通过 text-align属性,来指定每一行中内容的水平对齐方式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .a1{
                /*vertical-align: top; background: lightcoral;opacity: 0.7;*/
                /*vertical-align: text-top;background: lightgray;*/
                /*vertical-align: middle;font-size: 30px;*/
                /*vertical-align: bottom;background: lightgray;*/
                vertical-align: text-bottom;
            }
            
        </style>
    </head>
    <body>
        <p style="direction: ltr;">我是p标签我是p标签我是p标签</p>
        <p style="direction: rtl;">我是p标签我是p标签我是p标签</p>
        <p style="text-align: right;">我是p标签我是p标签我是p标签</p>
        <p style="text-align: left;">我是p标签我是p标签</p>
        <p style="text-align: center;">我是p标签我是p标签我是p标签</p>
        <p style="line-height: 30px;background: lightblue;">我是p标签我是p标签</p>
        <p style="vertical-align:baseline;">我是p标签我是p标签我是p标签</p>
        <p>A<span style="vertical-align: sub;">4</span></p>
        <p>Q<span style="vertical-align: super;">2</span></p>
        <div style="background: lightblue;height: 30px;">
            我是div
            <span class="a1">
                我是s
            </span>
        </div>
    </body>
</html>

CJAPNY_`%R3[`U~CRXE]_Y1.png

推荐学习:《css视频教程

Atas ialah kandungan terperinci css文本怎么设置水平对齐. 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
Bagaimana kami menandakan font Google dan mencipta goofonts.comBagaimana kami menandakan font Google dan mencipta goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts adalah projek sampingan yang ditandatangani oleh isteri pemaju dan suami pereka, kedua-duanya peminat besar tipografi. Kami telah menandakan Google

Artikel Web Dev yang tidak berkesudahanArtikel Web Dev yang tidak berkesudahanApr 12, 2025 am 11:44 AM

Pavithra Kodmad meminta orang ramai untuk membuat cadangan mengenai apa yang mereka fikir adalah beberapa artikel yang paling abadi mengenai pembangunan web yang telah mengubahnya

Perjanjian dengan elemen seksyenPerjanjian dengan elemen seksyenApr 12, 2025 am 11:39 AM

Dua artikel diterbitkan pada hari yang sama:

Amalkan pertanyaan GraphQL dengan keadaan API JavaScriptAmalkan pertanyaan GraphQL dengan keadaan API JavaScriptApr 12, 2025 am 11:33 AM

Belajar bagaimana untuk membina API GraphQL boleh menjadi agak mencabar. Tetapi anda boleh belajar cara menggunakan API GraphQL dalam 10 minit! Dan ia berlaku saya ' ve mendapat yang sempurna

CMSS peringkat komponenCMSS peringkat komponenApr 12, 2025 am 11:09 AM

Apabila komponen tinggal di persekitaran di mana pertanyaan data memisahkannya tinggal berdekatan, terdapat garis langsung yang cukup antara komponen visual dan

Tetapkan jenis pada bulatan ... dengan laluan mengimbangiTetapkan jenis pada bulatan ... dengan laluan mengimbangiApr 12, 2025 am 11:00 AM

Di sini ' s beberapa CSS Trickery dari Yuanchuan. Terdapat CSS Property Offset-Path. Suatu ketika dahulu, ia dipanggil gerakan-jalan dan kemudian ia dinamakan semula. I

Apa yang 'kembali' lakukan dalam CSS?Apa yang 'kembali' lakukan dalam CSS?Apr 12, 2025 am 10:59 AM

Miriam Suzanne menerangkan dalam video pemaju Mozilla mengenai subjek.

Pencinta modenPencinta modenApr 12, 2025 am 10:58 AM

Saya suka barang seperti ini.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.