hujung hadapan webtutorial cssBagaimana untuk menjajarkan imej secara menegak dalam bahagian yang menjangkau seluruh halaman web?
Penjajaran adalah kunci untuk menentukan di mana elemen seperti teks dan imej, butang dan kotak kandungan harus diletakkan. Komponen utama reka bentuk responsif ialah susunan item di tapak web anda. Ini kerana apabila tapak web dibuka daripada peranti dengan saiz skrin yang lebih kecil, seperti telefon pintar, reka letak dan struktur tapak web akan menyesuaikan diri dengan apa yang telah anda rancangkan terlebih dahulu.
Walau bagaimanapun, perubahan ini akan memberi kesan pada jarak antara dan dalam item, serta cara ia diselaraskan dan diletakkan. Anda mungkin mendapati bahawa anda tidak boleh mengklik atau mengisi butang atau borang, atau separuh teks hilang dari skrin jika ia tidak diselaraskan dengan betul.
Dalam artikel ini, kita akan membincangkan cara menjajarkan imej secara menegak dalam elemen berpecah. Apabila foto dijajarkan secara menegak, ia disusun ke dalam lajur. Ini dipanggil penjajaran menegak imej. Imej boleh dijajarkan secara menegak dengan mana-mana teks atau imej lain sendiri. Ini boleh dicapai dengan menggunakan beberapa sifat CSS seperti grid CSS, CSS flexbox, vertical-align, dll.
Gunakan sifat jajar menegak CSS
Menjajarkan menegak – Gunakan sifat CSS ini untuk menetapkan penjajaran menegak elemen.
Tatabahasa
element{
vertical-align: values;
}
Nilai boleh melalui cara berikut -
Panjang - Angkat elemen ke atas atau ke bawah mengikut panjang yang ditentukan
%- Menaikkan atau menurunkan elemen
Atas, tengah, bawah, garis dasar, dsb.,
Awal
Inherent
Contoh
Di sini kami menggunakan atribut vertical-align untuk menjajarkan imej secara menegak dengan teks.
<!DOCTYPE html>
<html>
<head>
<title> Vertical Alignment </title>
<style>
body {
background: rgb(200, 221, 220);
}
h1{
text-align: center;
color: #00FF00;
text-decoration: underline;
}
.main {
border: 1px solid black;
height: 70%;
width: 90%;
padding: 15px;
margin-top: 10px;
margin-right: -5px;
border-radius: 5px;
}
.main img {
width: 40%;
height: 8%;
padding: 2px;
border-radius: 7px;
}
span {
padding: 55px;
font-size: 25px;
color: #097969;
vertical-align: 100%;
font-family: Brush Script MT;
font-weight: 900;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h1 id="Vertical-Alignment"> Vertical Alignment </h1>
<div class= "main">
<img src= "https://www.tutorialspoint.com/images/logo.png" alt= "tutorialspoint">
<span>Welcome to Tutorialspoint </span>
</div>
</body>
</html>
Menggunakan CSS Flexbox
Anda boleh menggunakan CSS flexbox dan CSS Grid untuk menjajarkan satu siri elemen secara menegak.
CSS Flexbox ialah bekas yang mengandungi banyak elemen Flex. Elemen fleksibel boleh disusun dalam baris atau lajur seperti yang dikehendaki. Bekas Flex ialah elemen induk, dan item Flex ialah anak mereka.
display:flex membolehkan pembangun menggayakan setiap komponen supaya ia kelihatan sesuai dan menarik. Ia menyusun elemen anak unsur dalam baris atau lajur.
Bekas fleksibel mempunyai pelbagai sifat. Mereka disebut di bawah -
Flex-direction – Digunakan untuk menunjukkan arah di mana bekas menyusun komponen Flex. Nilai – Lajur, Lajur Songsang, Baris, Baris Songsang
Flex-wrap – Digunakan untuk menentukan atau menentukan sama ada projek Flex memerlukan pembalut. Nilai – baris baharu, baris baharu sekarang
Flex-flow – Ia membolehkan pembangun menentukan kedua-dua arah flex dan flexwrap. Nilai – balut baris, balut lajur, dsb.,
Sejajarkan-item – Keupayaan untuk menentukan penjajaran item flex
Nilai – tengah, mula lentur, hujung lentur, ruang sekeliling, dsb.,
Flex-basis – Digunakan untuk menentukan dimensi item flex.
Nilai - boleh panjang (cm, px, em) atau peratusan.
Justify-content - Ia juga digunakan untuk penjajaran item flex.
Nilai – pusat, mula lentur, hujung lentur, ruang sekeliling, dsb.,
Flex-shrink – Menerima nombor sebagai nilai. Jika item mempunyai nilai 3, ia mengecut tiga kali ganda berbanding jika ia mempunyai nilai 1.
Pesan - Ia menentukan susunan penjajaran elemen Flex.
Contoh
<!DOCTYPE html>
<html>
<head>
<title> Vertical alignment of series of images </title>
<style>
body {
background: rgb(200, 221, 220);
}
h1{
text-align: left;
margin: 15px;
color: green;
text-decoration: underline;
}
h2{
margin: 15px;
}
.main {
border: 1px solid black;
height: 55%;
width: 20%;
padding: 25px;
margin: 10px;
border-radius: 5px;
}
.main img {
width: 100px;
height: 110px;
padding: 3px;
border-radius: 7px;
}
.main{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h2 id="Vertical-alignment-of-images-using-CSS-flexbox"> Vertical alignment of images using CSS flexbox </h2>
<div class= "main">
<img src= "https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
<img src= "https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
<img src= "https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
</div>
</body>
</html>
Gunakan Grid CSS
Lebih mudah untuk membina halaman web tanpa menggunakan apungan dan kedudukan berkat ciri Grid CSS, yang membolehkan pembangun membina sistem susun atur baris dan lajur berasaskan grid. Bekas grid ialah elemen induk. Paparan: grid digunakan untuk mencipta elemen sebagai grid.
Sesetengah sifat grid CSS adalah seperti berikut -
Grid-template-columns – digunakan untuk membuat lajur. Nilai ini dinyatakan sebagai panjang, %, dsb.,
Grid-template-rows – digunakan untuk mencipta baris. Nilai dinyatakan dalam bentuk panjang, %, dsb.,
Grid-gap – Ia adalah sifat trengkas untuk jurang lajur dan jurang baris.
Contoh
<!DOCTYPE html>
<html>
<head>
<title> Vertical alignment of images using CSS Grid </title>
<style>
body {
background: rgb(200, 221, 220);
}
h1{
text-align: left;
margin: 15px;
color: green;
text-decoration: underline;
}
h2{
margin: 15px;
}
.main {
border: 1px solid black;
height: 55%;
width: 30%;
padding: 15px;
margin: 10px;
border-radius: 5px;
display: grid;
grid-template-rows: 35% 35%;
}
.main img {
width: 150px;
height: 110px;
padding: 2px;
border-radius: 7px;
}
</style>
</head>
<body>
<h2 id="Vertical-alignment-of-images-using-CSS-Grid"> Vertical alignment of images using CSS Grid </h2>
<div class= "main">
<img src= "https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
<img src= "https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
<img src= "https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
</div>
</body>
Kesimpulan
Dalam artikel ini, kami membincangkan cara berbeza untuk menjajarkan imej secara menegak dalam bahagian yang menjangkau seluruh halaman web.
Atas ialah kandungan terperinci Bagaimana untuk menjajarkan imej secara menegak dalam bahagian yang menjangkau seluruh halaman web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana kami menandakan font Google dan mencipta goofonts.comApr 12, 2025 pm 12:02 PMGoofonts 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 berkesudahanApr 12, 2025 am 11:44 AMPavithra 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 seksyenApr 12, 2025 am 11:39 AMDua artikel diterbitkan pada hari yang sama:
Amalkan pertanyaan GraphQL dengan keadaan API JavaScriptApr 12, 2025 am 11:33 AMBelajar 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 komponenApr 12, 2025 am 11:09 AMApabila 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 mengimbangiApr 12, 2025 am 11:00 AMDi 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?Apr 12, 2025 am 10:59 AMMiriam Suzanne menerangkan dalam video pemaju Mozilla mengenai subjek.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod
SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
Dreamweaver Mac版
Alat pembangunan web visual
