hujung hadapan web
tutorial css
Bagaimana untuk menjajarkan imej secara menegak dalam bahagian yang menjangkau seluruh halaman web?
Bagaimana 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;
}
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!
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
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1374
52
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
CSS Scrollbars Custom Custom: Pameran
Mar 10, 2025 am 11:37 AM
Dalam artikel ini kita akan menyelam ke dunia scrollbars. Saya tahu, ia tidak terdengar terlalu glamor, tetapi percayalah, halaman yang direka dengan baik
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
Mari kita gunakan (x, x, x, x) untuk bercakap mengenai kekhususan
Mar 24, 2025 am 10:37 AM
Saya hanya berbual dengan Eric Meyer pada hari yang lain dan saya teringat cerita Eric Meyer dari tahun -tahun pembentukan saya. Saya menulis catatan blog mengenai kekhususan CSS, dan
Bagaimana anda menggunakan CSS untuk membuat kesan teks, seperti bayang -bayang teks dan kecerunan?
Mar 14, 2025 am 11:10 AM
Artikel ini membincangkan menggunakan CSS untuk kesan teks seperti bayang -bayang dan kecerunan, mengoptimumkannya untuk prestasi, dan meningkatkan pengalaman pengguna. Ia juga menyenaraikan sumber untuk pemula. (159 aksara)
