html - 将图像放在图像旁边居中

Question

我想将一张图片放在一张图片的中央，如下所示:

我当前的代码是:

CSS

.slider-btns img {
  display: block;
  margin-left: auto;
  margin-right: auto; 
}

html

<div class="slider-btns">
  <img src="assets/img/arrow-left.png" style="width:50px" data-target="#myCarousel" data-slide="prev">
  <img src="assets/img/arrow-right.png" style="width:50px" data-target="#myCarousel" data-slide="next">
</div>

Answer 1

由于 img 元素在默认情况下是 inline，您可以使用 text-align: center 将它们水平居中。

.slider-btns {
    text-align: center;
}

只需删除其他样式，它就会按预期工作。 img 元素不能是 block 级别，因为它们不遵守 text-align 属性..

.slider-btns img { /* Remove these */
    display: block;
    margin-left: auto;
    margin-right: auto;
}