我想将图像居中放置在图像旁边,如下所示:
我当前的代码是:
的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>
由于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] 删除。
我来说两句