Docs: update template and css for control screenshots in the docs

docs/sphinx/_static/css/phoenix.css

@@ -254,6 +254,36 @@ div.footer {
   color: rgb(0,102,204);
 }
 
+.control-appearance-figures {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: end;
+    column-gap: 1.0em;
+    justify-content: space-around;
+}
+
+.appearance-figure {
+    margin: 0;
+    padding: 0;
+    max-width: 500px;
+    flex-shrink: 1;
+}
+
+.appearance-figure img {
+    max-height: 320px;
+}
+
+figcaption {
+    text-align: center;
+    text-align-last: center;
+}
+
+figcaption a.headerlink {
+    margin: 0;
+    padding: 0;
+}
+
 .floatleft {
 	position: relative;
 	float:left;

sphinxtools/templates.py

@@ -60,26 +60,27 @@ TEMPLATE_APPEARANCE = '''
 
 |
 
-.. figure:: _static/images/widgets/fullsize/wxmsw/%s
-   :alt: wxMSW
-   :figclass: floatleft
+.. container:: control-appearance-figures
 
-   **wxMSW**
+   .. figure:: _static/images/widgets/fullsize/wxmsw/%s
+      :alt: wxMSW
+      :figclass: appearance-figure
+
+      **wxMSW**
 
 
-.. figure:: _static/images/widgets/fullsize/wxmac/%s
-   :alt: wxMAC
-   :figclass: floatright
+   .. figure:: _static/images/widgets/fullsize/wxmac/%s
+      :alt: wxMAC
+      :figclass: appearance-figure
 
-   **wxMAC**
+      **wxMAC**
 
 
-.. figure:: _static/images/widgets/fullsize/wxgtk/%s
-   :alt: wxGTK
-   :figclass: floatcenter
-
-   **wxGTK**
+   .. figure:: _static/images/widgets/fullsize/wxgtk/%s
+      :alt: wxGTK
+      :figclass: appearance-figure
 
+      **wxGTK**
 
 |