Rumah > Artikel > hujung hadapan web > 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?

WBOYke hadapan: 2023-09-06 17:09:03728semak imbas

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> 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> 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> 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!

css 堆 display flex

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk memaparkan elemen perenggan sebaris menggunakan CSS?Artikel seterusnya：Bagaimana untuk memaparkan elemen perenggan sebaris menggunakan CSS?

Artikel berkaitan

Lihat lagi