Bootstrap 内联轮播

Question

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

重现 JSFiddle：https ://jsfiddle.net/yok78wrt/2/

Answer 1

用 vertical-align:top;

CSS 中的 vertical-align 属性控制在一行中相邻设置的元素如何排列。

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

有效值为：

基线- 这是默认值。
top - 将元素的顶部及其后代与整行的顶部对齐。
底部- 将元素及其后代的底部与整行的底部对齐。
中间- 将元素的中间与父级中小写字母的中间对齐。
text-top - 将元素的顶部与父元素字体的顶部对齐。
text-bottom - 将元素的底部与父元素字体的底部对齐。
sub - 将元素的基线与其父元素的下标基线对齐。就像一个会坐的地方。
极好的 - 将元素的基线与其父元素的上标基线对齐。就像一个会坐的地方。
length - 将元素的基线与其父元素基线上方的给定长度对齐。 （例如 px、%、em、rem 等）

Answer 2

去检查元素，你会得到这个标签有一个属性vertical-align：middle。这就是为什么您的图像没有并排对齐的原因。

您可以将自定义类添加到您的 css 文件中，就像这样

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

在 css 文件中你需要写：

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

这样做之后，图像和滑块将根据需要并排放置。