Question

我正在尝试在页面上居中放置图像，但是它仅适用于移动屏幕，因为我在col-xs-12标签上放置了<img>。这个课有什么问题吗？

col-md-6 col-xs-12 img-responsive text-center

我尝试将margin: 0 auto放入<img>和.pict div中，但是它不起作用。另外，我尝试了center-block类和text-center的课程。

<div class="container" style="width: 100%">
    <div class="pict" style="width: 100%">
        <div class="img-pict" style="margin: 0 auto">
            <img src="../img/CoverCNVol1No1.png" class="col-md-6 col-xs-12 img-responsive text-center">
        </div>
    </div>
</div>

图像位于左侧，应该位于屏幕中央。

Answer 1

这个想法是使用bootstrap容器类col-md-6等来为不同屏幕尺寸的图像设置容器大小，并将img放入其中。

您可以使用display: inline-block;将图像转换为内联元素，并在容器div上使用引导程序text-center类或text-align: center;。

或者您可以保留图像（块元素），并在容器div上用margin: auto或bootstrap4 mx-auto居中。

还请记住，要进行水平居中，请将左右边距设置为自动。顶部和底部仍可以根据需要调整大小。

<div class="container" style="width: 100%;">
  <div class="pict" style="width: 100%;">
    <div style="margin: auto;" class="img-pict col-md-6 col-xs-12">
        <img src="../img/CoverCNVol1No1.png" class="img-responsive" />
    </div>
</div>

使用引导程序类的图像居中div

1 个答案: