如何在盒子响应式CSS内制作图像

Question

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?

Answer 1

Usually, to center an element inside it's parent container horizontally you would set the margin on the sides of the element to auto, so that the element is always equally distant from parent walls on sides.

.centered-element {
    margin: 0 auto;
}

EDIT : Things you need to change in your html and css in order to center your div with class name 'box':

Parent container, the one that looks like this now:

<div class="s-12 m-6 l-4 margin-bottom" style="margin: 0 auto;">

Needs to change to this:

<div class="col col-sm-12 col-md-6 col-lg-12 margin-bottom">

In your css files, change the

.box {
background: rgba(255, 255, 255, 0.6);
display: block;
padding: 1.25em;
width: 100%;
}

to

.box {
background: rgba(255, 255, 255, 0.6);
display: block;
padding: 1.25em;
width: 60%;
margin: 0 auto;
}

Answer 2

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> 

Answer 3

Normally to make responsive images, most of the responsive frameworks make images as a block level element and set its max-width to be less than 100% (To avoid the images overflowing the container DIV)

Then to make the div centered you can use margin: 0 auto;

So image responsive class will be as follows

.img-responsive {
  max-width: 100%;
  display: block;
  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; } .img-responsive { max-width: 100%; display: block; margin: 0 auto; } .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"> <div class="box"> <h4 style="text-align:center;"><strong>John</strong></h4> <br> <img class="img-responsive" src="http://placehold.it/350x150"> </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 class="img-responsive" src="http://placehold.it/350x300"> </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 class="img-responsive" src="http://placehold.it/350x300" 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 class="img-responsive" src="http://placehold.it/350x300"> </div> </div> </div> </div>