Question

我的图像下面带有一些文本，但是，我试图使它们在中间垂直和水平对齐。它也必须同时响应移动视图和Web视图吗？

这就是我尝试过的

<style>
        .img-responsive {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }
</style>

<div class="container">
       <img src="..." class="img-responsive"/>
       <h4 style="text-align: center;">Sample Text 1</h4>
       <p style="text-align: center;">Sample Text 2</p>
</div>

Answer 1

尝试一下

HTML

<div class="container">
  <img src="https://s33.postimg.cc/ud7gljfb3/ripple_Bg.jpg" class="img-responsive"/>
     <div class="textblock">
       <h4 style="text-align: center;">Sample Text 1</h4>
       <p style="text-align: center;">Sample Text 2</p>
     </div>
</div>

Css （使中心居中的两种方法）

1。支持现代浏览器

    .container {
      width: 500px;
      height: 500px;
      position: relative;
     }

    .img-responsive {
      z-index: -1;
      position: absolute;
      display: block;
      width: 100%;
    }

    .textblock {
        width: 109px; /*need to give width*/
        display: inline-table; /*ie not supported*/
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

1。 IE不支持

    .container {
      width: 500px;
      height: 500px;
      position: relative;
     }

    .img-responsive {
      z-index: -1;
      position: absolute;
      display: block;
      width: 100%;
    }

    .textblock {
      width: 109px; /*need to give width*/
      height: 100px; /*need to give height*/
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }

希望有帮助：）

Answer 2

您可以使用the media object in bootstrap

<div class="media">
<img class="align-self-center mr-3" src=".../64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>

上面的文档链接显示了如何在不同位置对齐图像。 grid in Bootstrap4 is based on Flex，使您可以进行许多高级布局。看看。

在容器引导程序中垂直和水平对齐图像和文本

2 个答案: