Question

我想将图片置于图像下方。相关图片和文字位于passphrase generator at this site。我试过在图像和文本之间添加一个<br>，不同的显示属性，底部和顶部属性，单独改变文本的弯曲方向，这可能是我现在无法记住的。 This is the JS以防万一生成图像和文本的方式出现问题。非常感谢所有帮助！

Answer 1

您使用html5中的figure和figcaption元素

appTableView.estimatedRowHeight = 200
appTableView.rowHeight = UITableViewAutomaticDimension

这是小提琴演示： https://jsfiddle.net/twk3abom/

Answer 2

我建议你将图像和短语包装在一个数字元素中，以打破具有display: flex;的父级的布局。有关快速参考，请参阅this fiddle。

Answer 3

您需要将每个<img>和<p>标记包含在<div>内。这应该可以解决问题。

所以看起来应该是这样，

<div>
    <img>
    <p></p>
</div>
<div>
    <img>
    <p></p>
</div>
...

Answer 4

您可以尝试将每个元素放入<div>其他内容中进行更改。

在HTML上看起来像这样：

<div id="passphraseBilder">
    <div>
        <img>
        <p>bowling</p>
    </div>
    <div>
        <img>
        <p>doughnut</p>
    </div>
    <div>
        <img>
        <p>calculator</p>
    </div>
</div>

Answer 5

试试这个：

＆＃13;

 div {
      width: 200px;
      margin: 0 auto;
      text-align: center;
      border: 1px solid #ccc;
 }

 img {
      width: 100%;
 }

 p {
        color: #fff;
        background-color: #000;
        margin: 1px 1px 2px 1px;
   }

＆＃13;

<div id="wrapper">

    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRJqYSNS-A4_Vd8CptMrxXbIFS3q1HaHPHZSnscG1iNSMmrMKRS">
    <p>Flowers</p>
   
 </div>

＆＃13;

如何在图像下方显示中心文字

5 个答案: