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

Question

I have an image with some text below it, however, I am trying to get them to align vertically and horizontally in the middle. It must also be responsive to both mobile and web view, is it possible?

Here's what I have tried

<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

Try this

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 ( 2 ways to make center )

1. modern browser supported

    .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 not supported

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

Hope it helps:)

Answer 2

You can use 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>

The documentation link above show you how to align images in different positions. The grid in Bootstrap4 is based on Flex , which allow you to do many advanced layouts. Check it out.