将图像居中放置在图像旁边

EDA

我想将图像居中放置在图像旁边,如下所示:

在此处输入图片说明

我当前的代码是:

的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>
乔什·克罗泽(Josh Crozier)

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章