css : different placements for img with caption

Question

I have some text, and I have to be able to place pictures in it. I want three different placements for my pictures : center, left and right. My pictures have a caption.

I use float: right; and float: left;, but my problem is keeping the caption inside the image area, and not in its margin when I put it in center with margin-right: auto; and margin-left: auto;

I have to keep the HTML, and I'd prefer to avoid Js.

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

Snippet:

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>

The caption is at the right of the yellow area, I wan it at the right of the img.

Thanks for your time :)

Answer 1

Problem is margin:auto inherit parent width to 100%. It works only your elements having width itself,otherwise won't.
Simply add width to 'center' class.

Try this

.center {
  margin-left: auto;
  margin-right: auto;
  width:300px; //Equal to image width
  background-color: orange;
}

Here example

figure { 
  position: relative;
  display:block;
}

.center {
  margin-left: auto;
  margin-right: auto;
  width:300px;
  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>

Answer 2

There is the little bit of reordering and flexbox solution. Though it might be worth looking into css grid rather than using 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>

Answer 3

give your caption the same width as your image, center it with margin:auto, then align the text to the right:

right: 0;
left: 0;
bottom: 0;
margin-left: auto;
margin-right: auto;
width: 300px;
text-align: right;

see updated fiddle here