文字下方的中心图片答案

【问题标题】：Center picutre under Text文字下方的中心图片
【发布时间】：2021-07-21 19:48:34
【问题描述】：

我在文本下得到了一张图片，并且总是希望它在文本下方居中。

<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>

已经尝试过 display:block、inline-block、不同大小的网格等。

这就是我要找的：

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

【问题讨论】：

这能回答你的问题吗？ Center image element in parent div
display:inline-block 到父 div + text-align:center

标签： html css

【解决方案1】：

试试这个

<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>

【讨论】：

嘿，差不多，我需要将文本放在 div 的左侧

【解决方案2】：

<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>

【讨论】：