Question

我问题是将图像对齐到盒子的中心。代码

.index_image{
  width: 70%;
  height: 20%;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 1);
  border: 2px solid rgba(255, 255, 255, 1);    
}
.index_image img{
  width: 100%;
  height: 100%;
}

<div class="row index_image">
<img src="https://static.wixstatic.com/media/84770f_dec41f79f196959a09f9a7d88a507b86.jpg/v1/fill/w_266,h_85,al_c,q_80,usm_0.66_1.00_0.01/84770f_dec41f79f196959a09f9a7d88a507b86.jpg" >
</div>

我认为bootstrap行向左拉-15px。我不知道该怎么做，我尝试了各种保证金，我创建了一个包装div并尝试了保证金，没有任何效果。

页脚的版权部分略高于Linkedin部分。我不知道该怎么办，他们必须保持一致。这是由字体引起的。应用填充或边距似乎没有帮助，bottom: somevalue和绝对位置在引导程序中也不起作用。

.copyright{
  float: left;
  font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
    color: #616060;
    text-align: left; 
}
.linkedin{
  float: right;
  color: #043551;
  font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
  text-align: right;
}

<div class="row footer">
<div class="col-xs-6 copyright">
© 2016 company
</div>
<div class="col-xs-6 linkedin">
	Follow us on <a someheref>
</a>
</div>
</div>

Answer 1

我想要的东西

.index_image{
  margin-left: auto;
  margin-right: auto;

  width: 70%;
  height: 20%;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 1);
  border: 2px solid rgba(255, 255, 255, 1);    
}
.index_image img{
  width: 100%;
  height: 100%;
  

}

<div class="row index_image">
<div class="col-md-12 center" style="text-align: center">
<img src="https://static.wixstatic.com/media/84770f_dec41f79f196959a09f9a7d88a507b86.jpg/v1/fill/w_266,h_85,al_c,q_80,usm_0.66_1.00_0.01/84770f_dec41f79f196959a09f9a7d88a507b86.jpg" >
</div>
</div>

Answer 2

第1期：将margin: auto提供给图像容器。最好让display: block删除图像下方的小空格。

.index_image{
  margin: auto;
  width: 70%;
  height: 20%;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 1);
  border: 2px solid rgba(255, 255, 255, 1);    
}
.index_image img{
  width: 100%;
  height: 100%;
  display: block;
}

<div class="row index_image">
<img src="https://static.wixstatic.com/media/84770f_dec41f79f196959a09f9a7d88a507b86.jpg/v1/fill/w_266,h_85,al_c,q_80,usm_0.66_1.00_0.01/84770f_dec41f79f196959a09f9a7d88a507b86.jpg" >
</div>

第2期：使用display: inline-block作为页脚并使用vertical-align: top对齐。

.footer .copyright,
.footer .linkedin {
  display: inline-block;
  vertical-align: top;
}

另外，请不要忘记清除float s。

.footer:after {
  content: '';
  display: block;
  clear: both;
}

.copyright {
  float: left;
  font: normal normal normal 12px/1.3em Arial, 'ms pgothic', helvetica, sans-serif;
  color: #616060;
  text-align: left;
}
.linkedin {
  float: right;
  color: #043551;
  font: normal normal normal 20px Arial, 'ms pgothic', helvetica, sans-serif;
  text-align: right;
}
/*clears float*/

.footer:after {
  content: '';
  display: block;
  clear: both;
}
.footer .copyright,
.footer .linkedin {
  display: inline-block;
  vertical-align: top;
}

<div class="row footer">
  <div class="col-xs-6 copyright">
    © 2016 company
  </div>
  <div class="col-xs-6 linkedin">
    Follow us on
    <a someheref>
    </a>
  </div>
</div>

Answer 3

我认为您的第一个问题已得到解答，因为不均匀的页脚链接我会这样做。这假设您的页脚明显位于容器中。

＆＃13;

vim diff

＆＃13;

    .copyright{
      float: left;
      font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
        color: #616060;
        text-align: left; 
position: relative;
padding-top: 100%;

    }
    .linkedin{
      float: right;
      color: #043551;
      font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
      text-align: right;
position: relative;
left: 100%;
padding-top: 98%;
    }

＆＃13;

正确对齐页脚文本和图像

3 个答案: