html - Bootstrap 内联轮播

Question

我正在尝试使用另一个内联 block 元素(此处由 <img> 元素表示)内联 Bootstrap 4 轮播。但是每当我将它们并排放置时，旋转木马元素就会向上移动其高度的 50%。我怎样才能让它们完美并排？

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

Answer 1

使用vertical-align:top;

The vertical-align property in CSS controls how elements set next to each other on a line are lined up.

工作 jsfiddle: https://jsfiddle.net/y5a0b18s/

The valid values are:

baseline - This is the default value.
top - Align the top of the element and its descendants with the top of the entire line.
bottom - Align the bottom of the element and its descendants with the bottom of the entire line.
middle - Aligns the middle of the element with the middle of lowercase letters in the parent.
text-top - Aligns the top of the element with the top of the parent element's font.
text-bottom - Aligns the bottom of the element with the bottom of the parent element's font.
sub - Aligns the baseline of the element with the subscript-baseline of its parent. Like where a would sit.
super - Aligns the baseline of the element with the superscript-baseline of its parent. Like where a would sit.
length - Aligns the baseline of the element at the given length above the baseline of its parent. (e.g. px, %, em, rem, etc.)