Saya mencoba menyejajarkan korsel Bootstrap 4 dengan elemen blok sebaris lainnya (diwakili oleh elemen <img> di sini). Tetapi setiap kali saya meletakkannya dari sisi ke sisi, elemen korsel akan bergeser ke atas sebesar 50% tingginya. Bagaimana saya bisa memilikinya berdampingan dengan sempurna?

Repro JSFiddle: https://jsfiddle.net/yok78wrt/2/

2
omacha 14 Januari 2020, 13:32

2 jawaban

Jawaban Terbaik

Gunakan vertical-align:top;

Properti vertical-align di CSS mengontrol bagaimana elemen-elemen diatur di samping satu sama lain pada sebuah garis.


jsfiddle yang berfungsi: https://jsfiddle.net/y5a0b18s/

Nilai yang valid adalah:

baseline - Ini adalah nilai default.
atas - Sejajarkan bagian atas elemen dan turunannya dengan bagian atas seluruh baris.
bawah - Sejajarkan bagian bawah elemen dan turunannya dengan bagian bawah seluruh baris.
middle - Meratakan bagian tengah elemen dengan tengah huruf kecil pada induknya.
text-top - Meratakan bagian atas elemen dengan bagian atas font elemen induk.
text-bottom - Sejajarkan bagian bawah elemen dengan bagian bawah induk font elemen.
sub - Meratakan garis dasar elemen dengan subscript-baseline dari induknya. Seperti di mana a akan duduk.
super - Sejajarkan garis dasar elemen dengan garis dasar superskrip dari induknya. Seperti di mana a akan duduk.
panjang - Meratakan garis dasar elemen pada panjang tertentu di atas garis dasar induknya. (misalnya px, %, em, rem, dll.)

5
Roy Bogado 14 Januari 2020, 10:36

Pergi untuk memeriksa elemen dan Anda akan mendapatkan bahwa tag memiliki properti vertical-align: middle. Itu sebabnya gambar Anda tidak selaras berdampingan.

Anda dapat menambahkan kelas khusus ke file css Anda dan seperti itu

<img class="image-position" src="https://loremflickr.com/200/200">

Dan di file css Anda perlu menulis:

.image-position {
    vertical-align: top;
    border-style: none;
}

Setelah melakukan itu gambar dan slider akan berdampingan seperti yang Anda inginkan.

5
Shafayet Hossen 14 Januari 2020, 10:42