在两个图像之间居中的图像上方放置一个段落答案

【问题标题】：put a paragraph above a image centered between two images在两个图像之间居中的图像上方放置一个段落
【发布时间】：2020-10-23 14:53:39
【问题描述】：

我有 3 张图片，一张在左边，一张在右边，一张在中间。 The way the images are layed out

它们在 html 中的代码是这样的

<div class="container" style="text-align:center">
<div class="row">
    <div class="column">

        <img width="30%" src="images/skeleton.gif">
        <img src="images/logo.gif" height="100px">

        <img width="30%" src="images/skeleton.gif" position: absolute; and right: 0;>

    </div>
</div>

和css

position: relative;
user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}

如何将段落/文本放在中间图像上方的空白处

【问题讨论】：

标签： html css image text display

【解决方案1】：

<div class="container">
<div class="row">
    <div class="col float-left">
        <img src="images/skeleton.gif">
    </div>
    <div class="col float-center">
        <div class="row">
            <div class="col-12"><p> your paragraph </p></div>
            <div class="col-12"><img src="images/logo.gif" height="100"></div>
        </div>
    </div>
    <div class="col float-right"><img  src="images/skeleton.gif"></div>
</div>
</div>

【讨论】：

【解决方案2】：

.row {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr);
  grid-gap: 1rem;
  text-align: center;
}

img {
  max-width: 100%;
}

figure {
  margin: 0;
}

<div class="container">
  <div class="row">
    <div class="column">
      <figure>
        <img src="https://placehold.it/400">
      </figure>
    </div>

    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <figure>
        <img src="https://placehold.it/100">
      </figure>
    </div>

    <div class="column">
      <figure>
        <img src="https://placehold.it/400">
      </figure>
    </div>
  </div>
</div>

【讨论】：