Bootstrap встроенная карусель

Question

Я пытаюсь встроить карусель Bootstrap 4 с другим элементом встроенного блока (представлен здесь элементом <img>). Но всякий раз, когда я помещаю их из стороны в сторону, элемент карусели смещается вверх на 50% от его высоты. Как я могу иметь их идеально бок о бок?

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

Answer 1

Go для проверки элемента, и вы получите, что тег имеет свойство vertical-align: middle. Вот почему ваше изображение не выровнено рядом.

Вы можете добавить пользовательский класс в свой файл css, например,

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

, а в файле css вам нужно написать:

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

после этого изображение и ползунок будут располагаться рядом, как вы хотите.

Answer 2

Использование vertical-align:top;

Свойство вертикального выравнивания в CSS управляет выравниванием элементов, расположенных рядом друг с другом на линии.

Рабочий jsfiddle : https://jsfiddle.net/y5a0b18s/

Допустимые значения:

baseline - Это значение по умолчанию. top - Выровняйте верх элемента и его потомков с верхом всей строки. bottom - Совместите нижнюю часть элемента и его потомков с нижней частью всей линии. middle - выравнивает середину элемента по центру строчных букв в родительском элементе. text-top - выравнивает верх элемента с верхом шрифта родительского элемента. text-bottom - выравнивает основание элемента с основанием шрифта родительского элемента. sub - выравнивает базовую линию элемента с базовым индексом его родительского элемента. Например, где бы сидеть. super - выравнивает базовую линию элемента с верхним индексом базового элемента его родителя. Например, где бы сидеть. length - выравнивает базовую линию элемента на заданной длине над базовой линией его родителя. (например, px,%, em, rem, et c.)