CSS Pictures Arrangement in a Box Examples

Pictures Arrangement in a Box Examples

1. Pictures Arrangement in a Box Example 1: Center a Picture in a Box last updated 4Sep2016
   CSS Code Input:

   <div style="width:500px; height:auto; border:1px solid blue; background-color:#E0FFFF; margin:5px 0; padding:5px; font:normal normal normal 16px/1.1 sans-serif;text-decoration:none ">
   <img style="display:block; margin:0 auto; border-width:0px; width:150px; height:auto;" src="./../images/pic1.jpg" alt="Pic1" /> 
   </div>

   HTML Web Page In-line Output:

   
2. Pictures Arrangement in a Box Example 1: Center 2 Pictures in a Box Horizontally last updated 4Sep2016
   CSS Code Input:

   <div style="text-align:center; width:500px; height:auto; border:1px solid blue; background-color:#E0FFFF; margin:5px 0; padding:5px; font:normal normal normal 16px/1.1 sans-serif;text-decoration:none ">
   <img style="display:inline; border-width:0px; height:200px" src="./../images/pic1.jpg" alt="Pic1" /> 
   <img style="display:inline; border-width:0px; height:200px" src="./../images/pic2.jpg" alt="Pic2" /> 
   </div>

   HTML Web Page In-line Output:

   
3. Pictures Arrangement in a Box Example 1: Center 2 Pictures in a Box Vertically last updated 4Sep2016
   CSS Code Input:

   <div style="width:500px; height:auto; border:1px solid blue; background-color:#E0FFFF; margin:5px 0; padding:5px; font:normal normal normal 16px/1.1 sans-serif;text-decoration:none ">
   <img style="display:block; margin:0 auto; border-width:0px; width:150px" src="./../images/pic1.jpg" alt="Pic1" /> 
   <img style="display:block; margin:0 auto; border-width:0px; width:150px" src="./../images/pic2.jpg" alt="Pic2" /> 
   </div>

   HTML Web Page In-line Output: