How to make images inside a box responsive CSS


Tags: html,css,image

Problem :

I am facing a problem in modifying a website template. I have four images in total and I want them to appear as one in the first row centralized and the other three in the second row. The template code by default had an arrangement to place three images side by side within boxes, but for placing only one image, how do I align the image to the center? Here is the fiddle link :

https://jsfiddle.net/ntbmop1b/1/

I tried position : relative but it wasn't responsive. Position relative trial :

<div class="s-12 m-6 l-4 margin-bottom" style="position:relative; left:18em;">
  <div class="box">
   <h4 style="text-align:center;"><strong>Akshay Aravindan</strong></h4><br>
    <img src="img/del1.jpg" style="height:300px; ">
   </div>
</div>

Can someone please help me out?



Solution :

I added float:none and margin:0 auto

.size-960 .line {
  margin:0 auto;
  max-width:55em;		/*fixes width of the template's main page layout*/
  padding:0 0.625em;
 
}
.size-1140 .line {
  margin:0 auto;
  max-width:71.25em;
  padding:0 0.625em;
}
.size-960.align-content-left .line,.size-1140.align-content-left .line {margin-left:0;}
form {line-height:1.4em;}
nav {
  display:block;
  width:100%;
  background:#262626;
}
.line::after, nav::after, .center::after, .box::after, .margin::after {
  clear:both;
  content:".";
  display:block;
  height:0;
  line-height:0;
  visibility:hidden;
}
.box {
  background:rgba(255, 255, 255, 0.6);
  display:block;
  padding:1.25em;
  width:100%;
  }
.margin-bottom {margin-bottom:1.25em;}
.s-1, .s-2,.s-five,.s-3, .s-4, .s-5, .s-6, .s-7, .s-8, .s-9, .s-10, .s-11, .s-12, .m-1, .m-2, .m-five, .m-3, .m-4, .m-5, .m-6, .m-7, .m-8, .m-9, .m-10, .m-11, .m-12, .l-1, .l-2, .l-five, .l-3, .l-4, .l-5, .l-6, .l-7, .l-8, .l-9, .l-10, .l-11, .l-12 {
  float:left;
  position:relative;
}
.l-offset-1 {margin-left:8.3333%;}
.l-offset-2 {margin-left:16.6666%;}
.l-offset-five {margin-left:16.6666%;}
.l-offset-3 {margin-left:25%;}
.l-offset-4 {margin-left:33.3333%;}
.l-offset-5 {margin-left:41.6666%;}
.l-offset-6 {margin-left:50%;}
.l-offset-7 {margin-left:58.3333%;}
.l-offset-8 {margin-left:66.6666%;}
.l-offset-9 {margin-left:75%;}
.l-offset-10 {margin-left:83.3333%;}
.l-offset-11 {margin-left:91.6666%;}
.l-offset-12 {margin-left:100%;} 
.s-1 {width:8.3333%;}
.s-2 {width:16.6666%;}
.s-five {width:16.6666%;}
.s-3 {width:25%;}
.s-4 {width:33.3333%;}
.s-5 {width:41.6666%;}
.s-6 {width:50%;}
.s-7 {width:58.3333%;}
.s-8 {width:66.6666%;}
.s-9 {width:75%;}
.s-10 {width:83.3333%;}
.s-11 {width:91.6666%;}
.s-12 {width:100%;}
.margin > .s-1,.margin > .s-2,.margin > .s-five,.margin > .s-3,.margin > .s-4,.margin > .s-5,.margin > .s-6,.margin > .s-7,.margin > .s-8,.margin > .s-9,.margin > .s-10,.margin > .s-11,.margin > .s-12,
.margin > .m-1,.margin > .m-2,.margin > .m-five,.margin > .m-3,.margin > .m-4,.margin > .m-5,.margin > .m-6,.margin > .m-7,.margin > .m-8,.margin > .m-9,.margin > .m-10,.margin > .m-11,.margin > .m-12,
.margin > .l-1,.margin > .l-2,.margin > .l-five,.margin > .l-3,.margin > .l-4,.margin > .l-5,.margin > .l-6,.margin > .l-7,.margin > .l-8,.margin > .l-9,.margin > .l-10,.margin > .l-11,.margin > .l-12 {padding:0 0.625em;}
.m-1 {width:8.3333%;}
.m-2 {width:16.6666%;}
.m-five {width:20%;}
.m-3 {width:25%;}
.m-4 {width:33.3333%;}
.m-5 {width:41.6666%;}
.m-6 {width:50%;}
.m-7 {width:58.3333%;}
.m-8 {width:66.6666%;}
.m-9 {width:75%;}
.m-10 {width:83.3333%;}
.m-11 {width:91.6666%;}
.m-12 {width:100%;}
.l-1 {width:8.3333%;}
.l-2 {width:16.6666%;}
.l-five {width:20%;}
.l-3 {width:25%;}
.l-4 {width:33.3333%;}
.l-5 {width:41.6666%;}
.l-6 {width:50%;}
.l-7 {width:58.3333%;}
.l-8 {width:66.6666%;}
.l-9 {width:75%;}
.l-10 {width:83.3333%;}
.l-11 {width:91.6666%;}
.l-12 {width:100%;}
.right {float:right;} 
<div class="line">
            <div class="margin">
            <h2 style="color:#000;text-align:center;"><strong>Technical</strong></h2>
            <h3 style="color:#000;text-align:center;"><strong>UDG</strong></h3>
               <div class="s-12 m-6 l-4 margin-bottom" style="float:none;margin:0 auto;">
                  <div class="box">
                     <h4 style="text-align:center;"><strong>John</strong></h4><br>
                     <img src="img/del1.jpg" style="height:300px; ">
                  </div>
               </div>
                       
            </div>
         </div>

         <div class="line">
            <div class="margin">
            <h3 style="color:#000;text-align:center;"><strong>General Administrators</strong></h3>
                <div class="s-12 m-6 l-4 margin-bottom">
                  <div class="box">
                     <h4 style="text-align:center;"><strong>Ashley</strong></h4><br>
                     <img src="img/sponsor3.jpg" style="height:268px; ">
                  </div>
               </div>
               <div class="s-12 m-6 l-4 margin-bottom">
                  <div class="box">
                     <h4 style="text-align:center;"><strong>Susan</strong></h4><br>
                     <img src="img/del3.jpg" style="height:300px; ">
                  </div>
               </div>
               <div class="s-12 m-6 l-4 margin-bottom">
                  <div class="box">
                     <h4 style="text-align:center;"><strong>Sherley</strong></h4><br>
                     <img src="img/del4.jpeg" style="height:300px; ">
                  </div>
               </div>
            </div>
         </div>
         


    CSS Howto..

    How to move some text down in a li tag?

    How to create header numbers with CSS

    How to make div horizontally and vertically centered without scripting?

    How do I get two divs next to eachother, but spaced?

    How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?

    How to set table column widths to the longest value, excluding header

    How to change content of a div by clicking a button outside the div?

    How to make a Bootstrap 3 dropdown menu open by default when it is inside a collapsed navbar

    CSS: How to theme only submit button (and not cancel or back button) - I´m using Drupal 6

    How to override default CSS in modern GWT applications?

    How to have a DIV appear after you hover over an image/link/another div?

    How can I turn a background visibility on and off with jQuery?

    How to render email template in a page?

    How to apply SVG so that it works in IE background image

    How to create a rounded corner background box using CSS?

    Cutting out the middle portion of an image (example shown)?

    How to properly add divs inside another div so the original design doesn't break?

    Double Scroll Bars kept showing in Windows Broswers

    How to change tab key selection color with css? [duplicate]

    Third level drop down css wont show & content/links are out of order?

    Way of Determining How Many Style Rules I have

    How to add a disabled internal Style node to HTML5 DOM?

    How to add all li of existing ul to the bottom of another ul base on their css classes

    how to stretch an image in background css property

    How to optimize my css/html webpage? [closed]

    How many digits after the decimal point are interpreted in stylesheet rules?

    How to move all content (relative,absolute,…) down?

    howto create the iPhone Contacts header scroll Effect for html?

    How to add links to tabbing order when they're made visible with CSS?

    How to left-align and right-align elements in one row using flexbox?