Intrinsic Sizing

This caption was being displayed to the right of the image when min-content was not used. The use of that and margin made it possible for the caption to stay under the image and fit to the correct width.

Taming Table column widths

Head 1 Head 2 Head 3
Row 1 Element 1 Row 1 Element 2 Row 1 Element 3
Row 2 Element 1 Row 2 Element 2 Row 2 Element 3
Head 1 with a twist of a long row entry Head 2 with a twist of a long row entry Head 3 with a twist of a long row entry
Row 1 Element 1 with a twist of a long row entry Row 1 Element 2 with a twist of a long row entry Row 1 Element 3 with a twist of a long row entry
Row 2 Element 1 with a twist of a long row entry Row 2 Element 2 with a twist of a long row entry Row 2 Element 3 with a twist of a long row entry

Styling by sibling count

  • Column1
  • Column2
  • Column3
  • Column4
  • Column1
  • Column2
  • Column3
  • Column4
  • Column5
  • Column1
  • Column2
  • Column3
  • Column4
  • Column5
  • Column6
  • Column7

Fluid background, fixed content

The text needs to be centered no matter what the size of the image is. It can always take up more lines but should never get close to the margins.

The text needs to be centered no matter what the size of the image is. It can always take up more lines but should never get close to the margins.

Vertical Centering

I have been using flexboxes to layout this page anyways. So, it is easy to just demonstrate it with that. This is recursive centering.