html - 如何使盒子内的图像响应式 CSS

Question

我在修改网站模板时遇到问题。我总共有四张图片，我希望它们在第一行集中显示，另外三张在第二行显示。默认情况下，模板代码安排将三张图片并排放置在框内，但如果只放置一张图片，我该如何将图片居中对齐？这是 fiddle 链接:

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

我尝试了 position : relative 但它没有响应。位置相对试验:

<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>

有人可以帮帮我吗？

Answer 1

我添加了 float:none 和 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>