html - CSS : different placements for img with caption

Question

我有一些文字，我必须能够在其中放置图片。我想为我的照片设置三个不同的位置:居中、左侧和右侧。我的照片有标题。

我使用 float: right; 和 float: left;，但我的问题是将标题保留在图像区域内，而不是在我放置时将其保留在边缘与 margin-right: auto; 和 margin-left: auto;

居中

我必须保留 HTML，我宁愿避免使用 Js。

JSFiddle:https://jsfiddle.net/MarionLeHerisson/zbozmamh/4/

片段:

figure {
  position: relative;
  display: block;
}

.center {
  margin-left: auto;
  margin-right: auto;
  background-color: orange;
}

.left {
  float: left;
  background-color: lightblue;
}

.right {
  float: right;
  background-color: pink;
}

a {
  display: block;
  text-align: center;
}

img {
  width: 300px;
  height: 200px;
}

.caption {
  position: absolute;
  right: 0;
  bottom: 0;
}

<div contenteditable class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet
    maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat.
    Maecenas ut mauris in odio fringilla semper at at dolor. Pellentesque dictum ultricies accumsan.</p>
  <figure class="center">
    <picture>
      <a>
        <img class="img">
      </a>
    </picture>
    <figcaption class="caption">
      <small>
        <em class="legend">FIG 1 - center</em>
      </small>
    </figcaption>
  </figure>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet
    maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat.
    Maecenas ut mauris in odio fringilla semper at at dolor. Pe
    <figure class="left">
      <picture>
        <a>
          <img class="img">
        </a>
      </picture>
      <figcaption class="caption">
        <small>
        <em class="legend">FIG 2 - left</em>
      </small>
      </figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac,
      imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper
      placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pellentesque dictum ultricies accumsan.</p>
    <figure class="right">
      <picture>
        <a>
          <img class="img">
        </a>
      </picture>
      <figcaption class="caption">
        <small>
        <em class="legend">FIG 3 - right</em>
      </small>
      </figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac,
      imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper
      placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pellentesque dictum ultricies accumsan.</p>
</div>

标题在黄色区域的右边，我想要它在img的右边。

感谢您的宝贵时间:)

Answer 1

有一点重新排序和 flexbox 解决方案。尽管可能值得研究 css grid而不是使用 float

figure {
  display: flex;
  justify-content: center
}

.center {
  margin: 0 auto;
  background-color: tomato
}

.left {
  margin: 0 auto;
  float: left;
  background-color: #add8e6
}

.right {
  margin: 0 auto;
  float: right;
  background-color: pink
}

figure a {
  display: inline-block;
  position: relative
}

img {
  display: block;
  width: 300px;
  height: 200px
}

.caption {
  position: absolute;
  right: 0;
  bottom: 0
}

<div contenteditable class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pellentesque dictum ultricies accumsan.</p>
  <figure class="center">
    <a>
      <img class="img" />
      <figcaption class="caption">
        <small><em class="legend">FIG 1 - center</em></small>
      </figcaption>
    </a>
  </figure>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pe
    <figure class="left">
      <picture>
        <a>
          <img class="img">
          <figcaption class="caption">
            <small><em class="legend">FIG 2 - left</em></small>
          </figcaption>
        </a>
      </picture>
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pellentesque dictum ultricies accumsan.</p>
    <figure class="right">
      <picture>
        <a>
          <img class="img">
          <figcaption class="caption">
            <small><em class="legend">FIG 3 - right</em></small>
          </figcaption>
        </a>
      </picture>
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et porta ante, eu posuere elit. Nunc suscipit augue nec dolor sagittis, in ultricies mi semper. Sed et mi eget nibh rutrum tristique at in sapien. Nunc dolor mauris, tempor vel sem ac, imperdiet maximus metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sit amet elit vehicula, molestie justo id, ornare massa. Vivamus ullamcorper dapibus orci eget auctor. Nunc feugiat leo sed semper placerat. Maecenas ut mauris in odio fringilla semper at at dolor. Pellentesque dictum ultricies accumsan.</p>
</div>