By Henrik Petterson


2019-04-15 10:38:27 8 Comments

I have this:

figure {
  display:inline-block;
}

figcaption {
  width:0;
  min-width:100%;
}
<figure>
   <img src="https://i.imgur.com/k1Crowy.jpg" width="200">
   <figcaption> This is some random text that should not expand the figure tag beyond the width of the img tag </figcaption>
</figure>

How can I align the <figure> tag to the center, without breaking the figcaption width fix and without adding an outer div?

What I've tried so far

I can do the margin:0 auto approach to the child tags, but that will break the figcaption width fix.

3 comments

@MN. Vala 2019-04-15 11:23:38

for image or figure tag, you can use :

display: block;
margin:auto

and for every tag like , you can use :

position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%)

in this case, your code must be :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
            height: 400px;
            border: 1px solid grey
        }

        .hoz {
            position: absolute;
            left:50%;
            transform: translate(-50%);
        }
        .center {
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>

<div>
    <figure>
        <img src="https://i.imgur.com/k1Crowy.jpg" width="200" style="display: block;margin:auto">
        <figcaption> This is some random text that should not expand the figure tag beyond the width of the img tag </figcaption>
    </figure>
</div>

<div style="position: relative">
    <figure class="hoz" style="margin:0">
        <img src="https://i.imgur.com/k1Crowy.jpg" width="200">
        <figcaption> This is some random text that should not expand the figure tag beyond the width of the img tag </figcaption>
    </figure>
</div>

<div style="position: relative">
    <figure class="center" style="margin:0">
        <img src="https://i.imgur.com/k1Crowy.jpg" width="200">
        <figcaption> This is some random text that should not expand the figure tag beyond the width of the img tag </figcaption>
    </figure>
</div>

</body>
</html>

@Temani Afif 2019-04-15 11:42:10

did you try this? can you share a working example?

@MN. Vala 2019-04-15 13:12:14

@TemaniAfif I added an example.

@Xenio Gracias 2019-04-15 10:52:14

added below CSS to figure

  margin-left: 50%;
  transform: translateX(-50%);

figure {
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-50%);
}

figcaption {
  width: 0;
  min-width: 100%;
}
<figure>
  <img src="https://i.imgur.com/k1Crowy.jpg" width="200">
  <figcaption> This is some random text that should not expand the figure tag beyond the width of the img tag </figcaption>
</figure>

@Temani Afif 2019-04-15 11:06:18

note that this may create unwanted overflow because margin-left will be added to the width of the element and in small screen this will exceed the total width of the container. (more presicely when the width of figure is also equal to 50% of the parent width)

@Xenio Gracias 2019-04-15 11:10:36

@Temani Afif i didn't get you.

@Temani Afif 2019-04-15 11:13:03

here is an example with a bigger image: jsfiddle.net/gdmovrnt see the scroll you have at the bottom due to the unwanted overflow because the width of the figure + 50% of margin is more than the total width

@Temani Afif 2019-04-15 10:40:16

Use display:table and you will have a similar behavior as inline-block then you can consider margin:auto

figure {
  display:table;
  margin:auto;
}

figcaption {
  width:0;
  min-width:100%;
}
<figure>
   <img src="https://i.imgur.com/k1Crowy.jpg" width="200">
   <figcaption> This is some random text that should not expand the figure tag beyond the width of the img tag </figcaption>
</figure>

Related Questions

Sponsored Content

30 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 1693906 View
  • 2836 Score
  • 30 Answer
  • Tags:   css css-selectors

43 Answered Questions

[SOLVED] How to vertically center a div for all browsers?

38 Answered Questions

[SOLVED] How do I vertically center text with CSS?

98 Answered Questions

[SOLVED] How to horizontally center a <div>?

36 Answered Questions

[SOLVED] How to make div not larger than its contents?

  • 2009-01-16 16:03:07
  • George Snider
  • 1274699 View
  • 1878 Score
  • 36 Answer
  • Tags:   html css width

34 Answered Questions

[SOLVED] How to vertically align an image inside a div?

25 Answered Questions

[SOLVED] How to align content of a div to the bottom?

31 Answered Questions

[SOLVED] How to make a div 100% height of the browser window?

  • 2009-10-15 21:18:43
  • mike
  • 1757167 View
  • 1924 Score
  • 31 Answer
  • Tags:   html css css3 height

27 Answered Questions

[SOLVED] How to align a <div> to the middle (horizontally/width) of the page

20 Answered Questions

[SOLVED] Vertically align text next to an image?

Sponsored Content