将图像居中放在图像旁边

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;
}