Center picutre under Text

Question

I got a picture under text and always want it to be centered below the text.

<div>
    <div>
        <div style="color: black;margin-top: 20px;"> Long text where i want a picture beneath with a <a href="https://crop-circle.imageonline.co/crop-circle.png" style="color:black;" target="_blank">Flower</a> </div>
        <a href="https://www.asd.de/">
            <div> <img class="img-responsive" src="https://crop-circle.imageonline.co/crop-circle.png" target="_blank" style="padding-top:2px;height:auto;max-width: 170px;"> </div>
        </a>
    </div>
</div>

already tried with display:block, inline-block, grid with different sizes etc.

this is what i am looking for:

this is a long text and i want the picture to be centerd
                  __________________
                 |                  |
                 |   Picture        |
                 |                  |
                 ▔▔▔▔▔▔▔▔▔▔▔

Does this answer your question? [Center image element in parent div](https://stackoverflow.com/questions/18428997/center-image-element-in-parent-div) — bluejambo, Jul 21 '21 at 09:29

score 0 · Accepted Answer · answered Jul 21 '21 at 09:30

Try this

<div>
    <div>
        <div style="color: black;margin-top: 20px;"> Long text where i want a picture beneath with a <a href="https://crop-circle.imageonline.co/crop-circle.png" style="color:black;" target="_blank">Flower</a> </div>
        <a href="https://www.asd.de/">
            <div> <img class="img-responsive" src="https://crop-circle.imageonline.co/crop-circle.png" target="_blank" style="display: block; margin-left: auto; margin-right: auto; width: 50%; padding-top: 2px;height: auto;max-width: 170px"> </div>
        </a>
    </div>
</div>

hey, nearly, i need the text to be on the left side of the div — Cepturion, Jul 21 '21 at 09:34

score 0 · Answer 2 · answered Jul 21 '21 at 11:48

<div>
  <div>
      <div style="text-align: center; color: black;margin-top: 20px;"> Long text where i want a picture beneath with a <a href="https://crop-circle.imageonline.co/crop-circle.png" style="color:black;" target="_blank">Flower</a> </div>
      <a href="https://www.asd.de/">
          <div> <img class="img-responsive" src="https://crop-circle.imageonline.co/crop-circle.png" target="_blank" style="padding-top:2px;height:auto;max-width: 170px;display: block; margin: 0px auto;"> </div>
      </a>
  </div>
</div>

Center picutre under Text

2 Answers2