Memanipulasi kedudukan imej menggunakan CSS

pengenalan

Saya telah lama bermain dengan CSS dan HTML dan terus terang, saya terkejut bahawa saya tidak pernah menghadapi isu memusatkan imej secara menegak dalam bekas bersama-sama dengan teks. Sangat mudah untuk memanipulasi kedudukan imej dengan sendirinya dan untuk memanipulasi kedudukan teks. Ia juga mudah untuk memanipulasi kedua-duanya bersama-sama. Apa yang saya mahu lakukan ialah meletakkan kedua-dua imej dan teks dalam bekas yang sama, jajarkan imej ke kiri dan ratakan pengepala di tengah.

Cabarannya

Teks yang saya gunakan ialah tajuk tapak saya dengan elemen HTML elemen ialah elemen sebaris yang bermaksud ia gembira bermain dengan orang lain pada baris yang sama. Sudah tentu, saya boleh bermain dengan sifat apungan CSS, tetapi ada masalah. Sebaik sahaja saya memperkenalkan apungan untuk elemen, ia mengeluarkan elemen itu daripada aliran dokumen. dan menjadi sukar untuk mengawal tingkah laku elemen itu.

Pilihan

Seperti yang dinyatakan sebelum ini, saya cuba menggunakan float: left and float: inline-start, tetapi ia tidak selalu berkelakuan seperti yang saya mahu. Sebagai amalan terbaik, saya cuba menggunakan teknik terkini sebanyak mungkin dan di situlah flex moden dan CSS GridBox masuk. Flexbox apabila ditugaskan kepada bekas induk, menjajarkan semua teks kandungan ke kiri seperti yang ditunjukkan di bawah.

Selepas banyak percubaan dan kesilapan, ia menggunakan kekhususan dan menjadi minimalis. Saya juga ingin mempunyai pilihan untuk menggayakan imej yang mungkin saya gunakan di tapak secara bebas supaya saya tidak menggunakan sebarang penggayaan pada elemen teras img. Saya mencipta beberapa kelas untuk memanipulasi imej dan menggunakannya. Sepanjang percubaan dan kesilapan ini, satu lagi masalah mengganggu saya. Saya tidak dapat menyelaraskan imej ke tengah bekas induk dengan semua teknik yang saya tahu. Saya meneliti dan mencuba dengan align-self property. Itu akhirnya berjaya. Saya tidak mahu menggunakan ini pada elemen img teras dan saya tidak mahu mencipta kelas untuk ini jadi saya menggunakan Child Combinator untuk menyasarkan elemen img tertentu yang merupakan anak kepada elemen pengepala (header > img) . Itu telah menangani isu penjajaran imej.

Isu seterusnya ialah menjajarkan teks pengepala di tengah. Saya mencuba semua helah yang saya tahu dengan text-align, align-self, align-item, justify-self, dan justify-item. Tetapi kerana elemen pengepala induk ditandakan sebagai fleksibel, gaya seterusnya tidak digunakan. Akhirnya saya mencuba helah mudah untuk memusatkan kandungan menggunakan margin: auto dan itu berjaya. Begini rupa output akhir sekarang.

Walaupun apabila saya menukar ketinggian bekas pengepala, imej dan teks berada secara menegak di tengah-tengah elemen dan kekal di situ pada paksi-x.

Kod akhir

Kod HTML:

<header class="flexi">
  <img class="round-img small" src="img/Mukul-2019.jpg" alt="Mukul Dharwadkar" caption="Picture of Mukul Dharwadkar" />
  <h1 class="center-align">
    Mukul Dharwadkar
  </h1>
</header>

Kod CSS:

header {
    width: 900px;
    margin: auto;
    height: 120px;
    background-color: antiquewhite;
  }

/* The CSS rule below is highly specific for an img element that is a child of the header element.
Typically there will be only one img element inside the header and therefore this is safe to keep */

header > img {
  align-self: center;
}

.flexi {
  display: flex;
}

.round-img {
  border-radius: 50%;
}

.small {
  width: 100px;
}

.flexi {
  display: flex;
}

.center-align {
  margin: auto;
}

Kod penuh ada pada repo Github saya. Jangan ragu untuk menggunakannya.

Kesimpulan:

Mencapai penjajaran sempurna imej dan teks dalam reka bentuk web selalunya memerlukan percubaan dengan teknik CSS yang berbeza. Dalam kes ini, Flexbox terbukti sebagai penyelesaian yang paling cekap dan moden untuk memusatkan kandungan dalam bekas, sambil mengekalkan fleksibiliti untuk melaraskan penggayaan secara bebas. Dengan menggunakan pemilih yang disasarkan seperti Child Combinator dan memanfaatkan sifat penjajaran Flexbox, saya dapat menyelesaikan isu ini dengan bersih dan cekap. Kaedah ini bukan sahaja menyelaraskan kod tetapi juga memastikan pelarasan masa hadapan akan lebih mudah untuk diuruskan. CSS boleh menjadi rumit, tetapi dengan pendekatan yang betul, anda boleh membuat reka letak profesional yang digilap.

Atas ialah kandungan terperinci Memanipulasi kedudukan imej menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!