Merge pull request #189 from lkhrs/issue188

Center align images in figure elements
kevquirk · Mar 23, 2024 · 8978758 · 8978758
2 parents 442f7ca + c542b47
commit 8978758
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -769,22 +769,23 @@ <h2>Images</h2>
 				</header>
 
 					<h3>Plain <code>&lt;img&gt;</code> element</h3>
-					<p><img src="https://placekitten.com/480/480" alt="Photo of a kitten"></p>
+					<p><img src="https://placehold.co/480x480/EEE/31343C" alt="Placeholder image"></p>
 					<h3><code>&lt;figure&gt;</code> element with <code>&lt;img&gt;</code> element</h3>
-					<figure><img src="https://placekitten.com/420/420" alt="Photo of a kitten"></figure>
+					<figure><img src="https://placehold.co/420x420/EEE/31343C" alt="Placeholder image"></figure>
 					<h3><code>&lt;figure&gt;</code> element with <code>&lt;img&gt;</code> and
 						<code>&lt;figcaption&gt;</code> elements
 					</h3>
 					<figure>
-						<img src="https://placekitten.com/420/420" alt="Photo of a kitten">
+						<img src="https://placehold.co/420x420/EEE/31343C" alt="Placeholder image">
 						<figcaption>Here is a caption for this image.</figcaption>
 					</figure>
 					<h3><code>&lt;figure&gt;</code> element with a <code>&lt;picture&gt;</code> element</h3>
 					<figure>
 						<picture>
-							<source srcset="https://placekitten.com/800/800" media="(min-width: 800px)">
-							<img src="https://placekitten.com/420/420" alt="Photo of a kitten" />
+							<source srcset="https://placehold.co/2000x2000/EEE/31343C" media="(min-width: 800px)">
+							<img src="https://placehold.co/420x420/EEE/31343C" alt="Placeholder image" />
 						</picture>
+						<figcaption>Here is a caption for this image.</figcaption>
 					</figure>
 
 				<footer>
@@ -795,7 +796,7 @@ <h3><code>&lt;figure&gt;</code> element with a <code>&lt;picture&gt;</code> elem
 				<header>
 					<h2>Background images</h2>
 				</header>
-				<figure style="background-image:url('https://placekitten.com/300/300'); width:300px; height: 300px;">
+				<figure style="background-image:url('https://placehold.co/300x300/EEE/31343C'); width:300px; height: 300px;">
 				</figure>
 				<footer>
 					<p><a href="#top">[Top]</a></p>

diff --git a/simple-v1.min.css b/simple-v1.min.css
diff --git a/simple.css b/simple.css
@@ -564,11 +564,17 @@ figure {
   overflow-x: auto;
 }
 
+figure > img,
+figure > picture > img {
+  display: block;
+  margin-inline: auto;
+}
+
 figcaption {
   text-align: center;
   font-size: 0.9rem;
   color: var(--text-light);
-  margin-bottom: 1rem;
+  margin-block: 1rem;
 }
 
 blockquote {