centering images

templates/app.html

@@ -14,7 +14,7 @@
     <fieldset class="grid">
       <div>
         <fieldset>
-          <legend>Target Palette</legend>
+          <legend>Target Palette:</legend>
           {% for m in palettes %}
           <input type="radio" id="palette-{{m}}" name="palette" value="{{m}}"
                                                                 {%- if loop.first %} checked {% endif %}>
@@ -25,7 +25,7 @@
       </div>
 
       <div>
-        <label for="dither-select">Dither Method</label>
+        <label for="dither-select">Dither Method:</label>
         <select id="dither-select" name="dither_method">
           {% for m in dither_methods %}
           <option {%if loop.first %} selected {% endif %} value="{{m}}">{{m}}</option>
@@ -37,7 +37,7 @@
       </div>
     </fieldset>
 
-    <label for="image-input">Image</label>
+    <label for="image-input">Image: </label>
     <input type="file" name="image" id="image-input" accept="image/*">
     <small>Images will be resized to <code>800x480</code>, which may stretch the image.</small>
 

templates/preview.html

@@ -1,4 +1,3 @@
 <div id="preview-area">
-
-  <img src="data:image/png;base64,{{image_contents}}">
+  <img style="display: block; margin-left: auto; margin-right: auto;" src="data:image/png;base64,{{image_contents}}">
 </div>