如何在响应CSS的框内制作图像

时间：2016-07-03 11:41:03

标签： html css image

我在修改网站模板时遇到问题。我总共有四个图像，我希望它们在第一行集中显示为一个，在第二行显示为另外三个。 默认情况下，模板代码具有在框内并排放置三个图像的排列，但是如果只放置一个图像，如何将图像与中心对齐？ 这是小提琴链接：

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>

有人可以帮帮我吗？

3 个答案:

答案 0 :(得分：0)

通常，要将元素水平居中于其父容器中，您可以将元素两侧的边距设置为自动，这样元素始终与父墙两侧的距离相等。

.centered-element {
    margin: 0 auto;
}

编辑：您需要在html和css中更改的内容，以便使用类名＆＃39;框来对您的div进行居中：

父容器，现在看起来像这样：

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

需要改为：

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

在css文件中，更改

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

到

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

答案 1 :(得分：0)

我添加了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>

答案 2 :(得分：0)

通常，为了制作响应式图像，大多数响应式框架将图像作为块级元素并将其最大宽度设置为小于100％（以避免图像溢出容器DIV）

然后，为了使div居中，你可以使用margin：0 auto;

因此，图像响应类将如下

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

相关问题
最新问题